react组件的生命周期大致分为三种状态
- mounting 开始插入真实DOM 初始化render
- updating props 或者 state 更新之后组件的更新状态 也就是render
- unmounting 组件渲染结束,移处真实DOM
其中除了unmounting每个状态又有对应的will 和 did 方法共有5个函数。
- componentWillMount
- componentDidMount
- componentWillUpdate
- componentDidUpdate
- 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的回调方法