React 生命周期详解

React 的生命周期指的是组件从创建到销毁期间经历的一系列方法调用。这些方法在组件的不同阶段被调用，允许在特定时刻执行代码。

生命周期阶段

React 生命周期大致可以分为三个主要阶段：

1. 挂载（Mounting）

• constructor()：组件的构造函数，用于初始化状态和绑定事件处理器。
• static getDerivedStateFromProps()：当组件实例化后和接收新的 props 时被调用，用于根据 props 来设置 state。
• render()：负责组件的渲染，返回 JSX 或其他组件。
• componentDidMount()：在组件挂载到 DOM 后立即调用，用于执行依赖于 DOM 的操作或异步请求。

2. 更新（Updating）

• static getDerivedStateFromProps()：此方法在组件更新时也会被调用。
• shouldComponentUpdate()：在接收新的 props 或 state 时被调用，用于优化性能，决定组件是否应该更新。
• render()：更新阶段同样需要 render 方法。
• getSnapshotBeforeUpdate()：在最新的渲染输出提交到 DOM 前调用，用于获取更新前的 DOM 状态。
• componentDidUpdate()：在组件的更新已同步到 DOM 后调用，用于执行 DOM 相关的更新。

3. 卸载（Unmounting）

• componentWillUnmount()：在组件被卸载和销毁之前调用，用于执行必要的清理工作，如取消网络请求或清除在 componentDidMount 中创建的订阅等。

新旧生命周期方法

React 16.3 版本引入了新的生命周期方法，并废弃了一些旧的方法。例如，componentWillMount、componentWillReceiveProps 和 componentWillUpdate 被认为是不安全的，不推荐使用，并在未来的版本中可能会被完全移除。

正确使用这些生命周期方法，可以优化应用的性能和用户体验。