React新出来两个钩子函数是什么？和删掉的will系列有什么区别？

小安吖~

于 2023-08-18 21:06:19 发布

阅读量123

点赞数

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/Aan___/article/details/132369093

版权

React的钩子函数是通过组件的生命周期来执行不同的操作。然而，React在版本升级中对生命周期函数进行了一些变更。React 16.3版本引入了两个新的生命周期方法，分别是 getDerivedStateFromProps 和 getSnapshotBeforeUpdate。

getDerivedStateFromProps: 这个方法是在组件渲染之前调用的一个静态方法。它的存在是为了替代 componentWillReceiveProps，用于根据props的变化来更新组件的内部状态。与 componentWillReceiveProps 不同的是，getDerivedStateFromProps 必须返回一个对象，用于更新组件的状态，而不是直接修改 this.state。

getSnapshotBeforeUpdate: 这个方法在组件更新之前调用，用于获取组件更新前的一个快照。它可以返回一个值，在 componentDidUpdate 中接收到作为第三个参数，并在需要时进行使用。这个方法的引入是为了解决在组件更新期间读取DOM状态的需求。

关于被删掉的生命周期函数系列（Will系列），在React版本16.3之后，以下三个生命周期函数被标记为过时，并在未来版本中可能被废弃：

componentWillMount：这个方法在组件即将被挂载到DOM中时调用。可以在这个方法中执行一些准备工作。它在组件更新过程中不会再被调用，因此在新版本中被废弃。
componentWillUpdate：这个方法在组件即将被重新渲染而还没有被更新到DOM中时调用。可以在这个方法中执行一些准备工作。然而，在新版本中，推荐使用 getDerivedStateFromProps 来替代它。
componentWillReceiveProps：这个方法在接收到新的 props 之后被调用。如果组件接收到的props 与之前的 props 有所不同，可以在这个方法中执行一些相应的操作。然而，由于getDerivedStateFromProps 提供了更可靠的替代方案，因此在新版本中被废弃。

需要注意的是，对于已经使用了过时的生命周期函数的项目，可以使用React提供的相关方法进行更新和迁移，以适应新版本的变化。