React 那几个新的生命周期替换了旧的生命周期

React 16.3版本引入了新的生命周期方法来替代旧的生命周期方法，主要包括以下几个：

1. 替代componentWillMount：
- static getDerivedStateFromProps：在组件实例化或接收到新的props时调用，用于根据新的props更新状态。

2. 替代componentWillReceiveProps：
- static getDerivedStateFromProps：在接收到新的props时调用，用于根据新的props更新状态。

3. 替代componentWillUpdate：
- static getDerivedStateFromProps：在接收到新的props时调用，用于根据新的props更新状态。
- componentDidUpdate：更新发生后调用，可以进行DOM操作或获取更新后的数据。

这些新的生命周期方法是为了解决旧的生命周期方法可能引发的一些问题，如副作用产生的不一致性和难以理解的组件行为。新的生命周期方法更加明确和可预测，并且在异步渲染和Suspense等新特性中更加稳定和可靠。

相关问题

react 新生命周期

### React 新的生命周期方法及使用教程

#### 静态方法 `getDerivedStateFromProps`

静态方法`getDerivedStateFromProps`用于接收父组件传来的属性(props)，并据此更新子组件的状态(state)。此方法会在每次渲染前执行，包括首次挂载。它是一个纯函数，接受两个参数：当前接收到的新props以及旧状态state，并返回一个对象来更新状态或null表示不作任何更改[^1]。

static getDerivedStateFromProps(nextProps, prevState){
    if (nextProps.value !== prevState.oldValue) {
        return { oldValue: nextProps.value };
    }
    return null;
}

#### 方法 `componentDidUpdate`

每当组件完成更新阶段后的DOM操作均可以在该钩子里实现逻辑处理。这使得开发者能够在确认UI已经同步至最新状态之后再做进一步的动作，比如网络请求、手动操控DOM节点等[^5]。

componentDidUpdate(prevProps, prevState) {
    // Typical usage (don't forget to compare props):
    if (this.props.userID !== prevProps.userID) {
        this.fetchData(this.props.userID);
    }
}

#### 初始化过程中的生命周期顺序

当组件实例初次被创建并且插入到DOM之中时，经历的一系列流程依次为：

- 构造器(`constructor`)
- 接收来自父级传递过来的数据(`static getDerivedStateFromProps`)
- 渲染视图结构(`render`)
- 完成装载动作(`componentDidMount`)

上述四个环节构成了React框架下标准意义上的初始化周期[^4]。

#### 更新过程中涉及的方法

对于已存在的组件而言，在响应外部环境变化而触发重绘的过程中涉及到以下几个重要时刻点：

- 当接收到新的prop时调用`getDerivedStateFromProps`
- 判断是否有必要刷新界面(`shouldComponentUpdate`)
- 若确实需要，则先通过`render()`生成虚拟dom树形结构
- 执行实际页面内容替换之前还可以利用`componentWillUpdate`(即将废弃，请改用`UNSAFE_componentWillUpdate`)来进行预处理工作；最后一步则是通知开发人员整个更新事务已完成(`componentDidUpdate`).

react新旧生命周期

新旧生命周期的变化主要表现在以下几个方面：

1. 旧的生命周期：
- componentWillMount：组件即将挂载到页面的时刻执行。
- componentDidMount：组件挂载完成之后执行。
- componentWillReceiveProps：组件props发生变化时执行。
- shouldComponentUpdate：组件是否需要更新时执行。
- componentWillUpdate：组件即将更新时执行。
- componentDidUpdate：组件更新完成之后执行。
- componentWillUnmount：组件即将被销毁时执行。

2. 新的生命周期：
- getDerivedStateFromProps：组件props发生变化时执行，可以在这里返回一个新的state。
- getSnapshotBeforeUpdate：组件即将更新时执行，可以在这里获取到更新前的页面快照。

需要注意的是，新的生命周期函数并不完全替换旧的生命周期函数，而是在旧的生命周期函数的基础上进行了补充和调整。旧的生命周期函数仍然可以使用，并且在React 17版本之前仍然被支持。