react生命周期及用法

React生命周期是React组件在挂载、更新和卸载过程中的一系列方法的集合。通过生命周期方法，我们可以在不同阶段执行特定的操作，例如初始化组件、更新状态、渲染UI等。

React生命周期分为三个阶段：挂载阶段、更新阶段和卸载阶段。以下是React生命周期的主要方法及其用法：

1. 挂载阶段：

   • constructor()：初始化组件的状态和绑定方法。
   • static getDerivedStateFromProps()：在初始化和接收到新的props时调用，返回一个新的状态对象。
   • render()：根据状态和props渲染UI。
   • componentDidMount()：组件挂载后调用，通常用于进行网络请求、订阅事件等。

2. 更新阶段：

   • static getDerivedStateFromProps()：在接收到新的props时调用，返回一个新的状态对象。
   • shouldComponentUpdate()：在更新之前调用，用于判断是否需要重新渲染组件，默认返回true。
   • render()：根据状态和props渲染UI。
   • getSnapshotBeforeUpdate()：在更新之前调用，返回一个快照值，通常用于获取DOM更新前的信息。
   • componentDidUpdate()：组件更新后调用，通常用于处理更新后的操作。

3. 卸载阶段：

   • componentWillUnmount()：组件卸载之前调用，用于清理定时器、取消订阅等。

React生命周期的使用场景：

• 初始化数据：在constructor()中初始化组件的状态或其他变量。
• 发起网络请求：在componentDidMount()中进行网络请求，并将获取到的数据存储在组件状态中。
• 更新UI：在render()中根据状态和props渲染UI。
• 处理更新后的操作：在componentDidUpdate()中处理组件更新后的操作，例如更新后的UI效果、处理接收到的新数据等。
• 清理资源：在componentWillUnmount()中清理定时器、取消订阅等。

需要注意的是，React生命周期方法在React 16.3版本之后发生了一些改变。推荐使用新的生命周期方法，如getDerivedStateFromProps()和getSnapshotBeforeUpdate()，同时尽量避免使用旧的生命周期方法，如componentWillMount()和componentWillReceiveProps()。