React组件生命周期总结

react组件的生命周期大体分为三种状态react

  1. mounting  开始插入真实DOM 初始化render
  2. updating   props 或者 state 更新以后组件的更新状态 也就是render
  3. unmounting 组件渲染结束,移处真实DOM

其中除了unmounting每一个状态又有对应的will 和 did 方法共有5个函数。函数

  1. componentWillMount
  2. componentDidMount
  3. componentWillUpdate
  4. componentDidUpdate
  5. componentWillUnmount

除此以外还有两个特殊的方法shouldComponentUpdate(state或者props改变时会触发的函数)以及componentWillReceiveProps(props改变会触发的函数)spa

它们的执行顺序分别是component

初始化(init render):生命周期

getDefaultProps => getInitalStates => componentWillMount => render => componentDidMountget

props变化it

componentWillReceiveProps => shouldComponentUpdate => componentWillUpdate => render =>componentDidUpdate渲染

state变化date

shouldComponentUpdate => componentWillUpdate => render => componentDidUpdate方法

这里能够看出,Props 比 State 的改变会有多出一个componentWillReceiveProps的回调方法

相关文章
相关标签/搜索