React 的生命周期

Initialization

• setup props and state

Mounting

• componentWillMount
• render
• componentDidMount

Updation

props 发生变化

• componentWillReceiveProps // 1.从父组件接收参数 2.组件不是第一次存在父组件中 3.父组件的 render() 被重新执行
• shouldComponentUpdate // -> return false 子组件关联的父组件数据更新，子组件不会更新
  ↓ true ↓× false
• componentWillUpdate
• render
• componentDidUpdate

states 发生变化

• shouldComponentUpdate
  ↓ true ↓× false
• componentWillUpdate
• render
• componentDidUpdate

Unmounting

• componentWillUnmount

补充

根据 props 的变更情况渲染组件

shouldComponentUpdate 生命周期

shouldComponentUpdate(nextProps, nextState) {
  if (nextProps.content !== this.props.content) { // 根据 props 的变更情况渲染组件
    return true
  } else {
    return false
  }
}