正视componentWillXXX因何被打上UNSAFE的标签

自React 16.3.0版本起，componentWillMount、componentWillReceiveProps和componentWillUpdate这三个生命周期钩子就被标记为UNSAFE。主要原因是这些钩子经常被错误使用，并带来了许多潜在的问题。为了解决这些问题，React推出了两个新的生命周期钩子：getDerivedStateFromProps和getSnapshotBeforeUpdate，作为componentWillXXX的替代方案。

钩子的错误使用方式

最常见的问题是开发者滥用componentWillMount钩子来执行副作用，如网络请求或状态更新。这会导致难以理解和调试的代码，特别是当涉及多个组件时。componentWillReceiveProps钩子也会导致类似的问题，因为它在每次组件接收到新属性时都会触发，而不管这些属性是否真的发生了变化。

更安全且高效的替代方案

为了解决这些问题，React推出了getDerivedStateFromProps和getSnapshotBeforeUpdate钩子。

getDerivedStateFromProps钩子在组件接收到新属性时触发，但只有在属性确实发生了变化时才会调用。这意味着它可以用来执行副作用，而不会导致性能问题。

getSnapshotBeforeUpdate钩子在组件即将更新之前触发。它可以用来捕获组件状态的快照，以便在更新后进行比较。这对于在更新后重新渲染组件很有用，例如，如果组件的状态在更新过程中发生了变化。

迁移到Concurrent模式

React 16.3.0版本还引入了Concurrent模式。这是一个新的渲染模式，可以提高React应用程序的性能。要使用Concurrent模式，需要将应用程序中的所有组件都迁移到新的钩子。

迁移到Concurrent模式可能会很复杂，但它可以带来巨大的性能提升。如果您正在使用React，那么强烈建议您考虑迁移到Concurrent模式。

结论

componentWillXXX钩子已被标记为UNSAFE，因为它们经常被错误使用并带来许多潜在的问题。React推出了两个新的生命周期钩子：getDerivedStateFromProps和getSnapshotBeforeUpdate，作为componentWillXXX的替代方案。这些新的钩子更安全且高效，并有助于提高React应用程序的性能。如果您正在使用React，那么强烈建议您考虑使用这些新的钩子。