react组件的生命周期

组件的生命周期

组件的生命周期分成三个状态：

• Mounting：已插入真实 DOM
• Updating：正在被重新渲染
• Unmounting：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

• componentWillMount()：挂载前
• componentDidMount()：挂载后
• componentWillUpdate(object nextProps, object nextState)：修改前
• componentDidUpdate(object prevProps, object prevState)：修改后
• componentWillUnmount()：注销

此外，React 还提供两种特殊状态的处理函数。

• componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
• shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

生命周期流程图(旧)

• 初始化阶段: 由ReactDOM.render()触发—初次渲染
  1. constructor()
  2. componentWillMount()
  3. render()
  4. componentDidMount()：一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
• 更新阶段: 由组件内部this.setSate()或父组件重新render触发
  1. shouldComponentUpdate()
  2. componentWillUpdate()
  3. render()
  4. componentDidUpdate()
• 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
  1. componentWillUnmount()：一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

生命周期流程图(新)

• 初始化阶段: 由ReactDOM.render()触发—初次渲染
  1. constructor()
  2. getDerivedStateFromProps
  3. render()
  4. componentDidMount()：一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
• 更新阶段: 由组件内部this.setSate()或父组件重新render触发
  1. getDerivedStateFromProps
  2. shouldComponentUpdate()
  3. render()
  4. getSnapshotBeforeUpdate
  5. componentDidUpdate()
• 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
  1. componentWillUnmount()：一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

重要的勾子

1. render：初始化渲染或更新渲染调用
2. componentDidMount：开启监听, 发送ajax请求
3. componentWillUnmount：做一些收尾工作, 如: 清理定时器

即将废弃的勾子

1. componentWillMount
2. componentWillReceiveProps
3. componentWillUpdate

现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。