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改变会触发的函数)

它们的执行顺序分别是

初始化(init render):

getDefaultProps => getInitalStates => componentWillMount => render => componentDidMount

props变化

componentWillReceiveProps => shouldComponentUpdate => componentWillUpdate => render =>componentDidUpdate

state变化

shouldComponentUpdate => componentWillUpdate => render => componentDidUpdate

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

猜你喜欢

转载自my.oschina.net/u/3607067/blog/1787118