概念介绍
componentWillMount
componentWillMount 是 React 组件的生命周期方法之一，它在组件即将被挂载到 DOM 中之前被调用。在该方法中，你可以执行一些准备工作，例如初始化状态、订阅事件或者发送网络请求等。
具体来说，componentWillMount 方法会在组件的 render 方法之前被调用，因此在这个阶段对组件进行的状态更新不会触发重新渲染。一般来说，你应该避免在 componentWillMount 中进行过多的耗时操作，因为这可能会影响到组件的性能。
值得注意的是，componentWillMount 方法在组件的生命周期中仅会被调用一次，在组件的整个生命周期内仅执行一次。
在 React 17 版本及以后，componentWillMount 方法已被标记为不推荐使用，并且在 React 18 版本中可能会被移除。推荐使用 componentDidMount 来替代 componentWillMount，因为 componentDidMount 更适合进行初始化操作，并且更符合异步渲染的模式。
componentWillReceiveProps
componentWillReceiveProps 是 React 组件的生命周期方法之一，它在组件接收到新的 props 之前被调用。在这个方法中，你可以根据新的 props 来更新组件的状态或执行其他一些操作。
具体来说，componentWillReceiveProps(nextProps) 方法会在组件即将接收新的 props 时被调用。它接收一个参数 nextProps，即即将被传入的 props。通过比较 nextProps 和当前的 props，你可以根据需要进行一些逻辑处理。
需要注意的是，componentWillReceiveProps 方法在组件的第一次渲染过程中不会被调用。它只会在组件已经被挂载到 DOM 中后，并且父组件传入新的 props 时触发。此外，如果组件是由于父组件的重新渲染而导致的 props 变化，那么 componentWillReceiveProps 也会被调用。
然而，需要注意的是，从 React 16.3 版本开始，componentWillReceiveProps 被标记为不推荐使用，并且在未来的版本中可能会被移除。推荐使用新的生命周期方法 getDerivedStateFromProps 或者在必要时使用 componentDidUpdate 来替代 componentWillReceiveProps。这是因为 getDerivedStateFromProps 提供了更加明确和可控的状态更新机制，而 componentDidUpdate 则更适合进行副作用操作。
componentWillUpdate
componentWillUpdate 是 React 组件的生命周期方法之一，它在组件即将更新并且重新渲染到 DOM 中之前被调用。在该方法中，你可以执行一些与组件更新相关的操作，例如根据新的 props 或 state 进行一些计算或准备工作。
具体来说，componentWillUpdate 方法会在组件的 render 方法之前被调用，并且只会在组件接收到新的 props 或 state 并且需要重新渲染时触发。在这个方法中，你可以访问到组件更新前的 props 和 state，以及即将更新的 props 和 state。然后，你可以根据这些值进行一些逻辑处理，例如比较新旧 props 或 state 的差异，做出相应的响应。
需要注意的是，尽管在 componentWillUpdate 中可以执行一些与更新相关的操作，但不建议在这个方法中进行对组件进行状态更新，因为这可能会导致无限循环的更新。如果需要在更新后执行某些操作，应该使用 componentDidUpdate 方法。
在 React 17 版本及以后，componentWillUpdate 方法已被标记为不推荐使用，并且在 React 18 版本中可能会被移除。推荐使用 componentDidUpdate 来替代 componentWillUpdate，因为 componentDidUpdate 更适合进行与更新相关的操作，并且更符合异步渲染的模式。
react为什么要废弃ComponentWillMount、ReceiveProps和Update这三个生命周期
在 React 中，componentWillMount、componentWillReceiveProps 和 componentWillUpdate 这三个生命周期方法被废弃，主要是出于以下几个原因
异步渲染的引入
React 16 开始引入了异步渲染的概念，以提高性能和用户体验。在异步渲染模式下，组件的生命周期方法不再保证同步执行。因此，之前的生命周期方法可能会在不可预测的时机被触发，导致不一致的行为和难以调试的问题。为了解决这个问题，React 弃用了一些生命周期方法，以确保组件的行为更加可预测和稳定。
未来版本的计划
React 团队在未来版本中计划引入更多的异步渲染特性和优化，这需要对生命周期进行更改和调整。废弃一些旧的生命周期方法是为了为未来的变更做准备，以确保向后兼容性和平滑过渡。
新的生命周期方法替代
React 推荐使用新的生命周期方法来替代被废弃的方法，例如 componentDidMount、componentDidUpdate 和 getDerivedStateFromProps。这些新的方法更符合 React 的设计理念，并且能够更好地满足开发者的需求。 虽然废弃了部分生命周期方法，但 React 仍然保持了向后兼容性，旧的代码仍然可以正常工作。然而，为了获得更好的性能和稳定性，建议开发者尽量使用新的生命周期方法和钩子函数。
componentDidUpdate、componentDidMount和getDerivedStateFromProps
这三个生命周期方法 componentDidUpdate、componentDidMount 和 getDerivedStateFromProps 在 React 中的实现原理和为什么更支持异步渲染可以概括如下
componentDidUpdate:
- 实现原理componentDidUpdate 是 React 组件的生命周期方法之一，它在组件完成更新并且重新渲染到 DOM 中后被调用。在该方法中，我们可以执行一些与更新后的 DOM 相关的操作，例如更新 DOM 元素、发送网络请求、进行状态更新等。React 会在每次组件完成更新后调用 componentDidUpdate 方法。
- 支持异步componentDidUpdate 支持异步渲染的主要原因是，它在组件完成更新后被调用，这意味着在调用这个方法时，React 已经将更新后的 DOM 渲染到页面上，从而可以保证对 DOM 的操作是安全的并且不会导致页面闪烁或不稳定。
componentDidMount:
- 实现原理componentDidMount 是 React 组件的生命周期方法之一，它在组件被挂载到 DOM 中后被调用。在该方法中，我们可以执行一些初始化操作，例如订阅事件、发送网络请求、获取 DOM 元素等。React 会在组件挂载完成后调用 componentDidMount 方法。
- 支持异步componentDidMount 支持异步渲染的主要原因是，它在组件被挂载到 DOM 后被调用，这意味着在调用这个方法时，React 已经将组件成功渲染到页面上，从而可以安全地执行与 DOM 相关的操作。
getDerivedStateFromProps:
- 实现原理getDerivedStateFromProps 是 React 16.3 版本引入的生命周期方法之一，它在组件接收到新的 props 并且在 render 方法之前被调用。在该方法中，我们可以根据新的 props 来更新组件的 state。getDerivedStateFromProps 是一个静态方法，它不能访问组件的实例对象，只能接收 props 和 state 作为参数，并返回一个对象来更新 state，或者返回 null 表示不需要更新 state。
- 支持异步getDerivedStateFromProps 支持异步渲染的原因是，它在 render 方法之前被调用，这意味着在执行 render 方法之前，React 可以根据新的 props 来计算出新的 state，并将其应用到组件中，从而实现异步更新。
总结一下，这三个生命周期方法都支持异步渲染的原因是它们都在组件更新之后或者挂载之后被调用，这意味着在调用这些方法时，React 已经完成了相应的 DOM 渲染或组件挂载，从而可以安全地执行与 DOM 相关的操作。因此，这些方法更适合用于执行与 DOM 操作相关的异步任务。
原文地址：https://mp.weixin.qq.com/s/R6OKnonRn0ZqDLY1ZZkqvA
