React生命周期了解

组件的生命周期

• 所谓的生命周期就是指某个事物从开始到结束的各个阶段，当然在 React.js 中指的是组件从创建到销毁的过程，React.js 在这个过程中的不同阶段调用的函数，通过这些函数，我们可以更加精确的对组件进行控制，前面我们一直在使用的 render 函数其实就是组件生命周期渲染阶段执行的函数

生命周期演变 以前-----现在

以前

挂载阶段

• constructor
• componentWillMount
• render
• componentDidMount
  更新阶段

父组件更新引起组件更新

• componentWillReceiveProps(nextProps) *
• shouldComponentUpdate(nextProps, nextState)
• componentWillUpdate(nextProps, nextState) render
• componentDidUpdate(prevProps, prevState)

组件自身更新

• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate

卸载阶段

componentWillUnmount

现在

挂载阶段

• constructor
• static
• getDerivedStateFromProps(props, state)
  注意 this 问题render componentDidMount

更新阶段

父组件更新引起组件更新

• static
• getDerivedStateFromProps(props, state) shouldComponentUpdate()
• componentWillUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

组件自身更新

• shouldComponentUpdate()
• componentWillUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

卸载阶段

componentWillUnmount