react生命周期

最新推荐文章于 2021-08-27 14:02:40 发布

原创最新推荐文章于 2021-08-27 14:02:40 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react生命周期

react 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了React的生命周期，包括第一次渲染、更新state、更新props、用forceUpdate更新等情况。阐述了多个生命周期函数的作用，如getDerivedStateFromProps更新state，getSnapshotBeforeUpdate为componentDidUpdate传参等，还提及新老生命周期的替代关系及各阶段修改state和props的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上边的数据是当前的state和props，下边是传入的数据

第一次渲染生命周期：

更新state：

更新props：

用forceUpdate更新：

新的生命周期：

getDerivedStateFromProps：作用是返回一个对象(必须得是对象或者数组)来更新state的数据。更新当前的state和新的即将要更新的新state。

getSnapshotBeforeUpdate：作用是返回一个数据，作为componentDidUpdate的第三个参数传入。

第一次渲染：

更新state：

更新props：

用forceUpdate更新：

componentWillMount：在第一次渲染时第一个运行的生命周期，可以修改state，修改的state将在下一个生命周期开始就可以直接用，它接下来的生命周期是render和componentDidMount，所以没法知道传入的参数。也可以修改props，修改了props以后重新运行生命周期。

render: 可以修改state和props，但是很危险的操作，都是重新运行一遍生命周期。

componentDidMount：在第一次渲染时，渲染结束运行的生命周期，修改state很安全，也可以修改props，都是重新运行一遍生命周期

componentWillReceiveProps：在更新props时运行的生命周期，可以修改state或者修改props。如果修改了state以后，之后的生命周期传入的state参数会更新。修改props在这个生命周期里是个很危险的操作，会重新运行一遍生命周期。

shouldComponentUpdate：在更新props或者state时运行的生命周期，返回true或者fase，一旦返回的是false，接下来的生命周期都不再运行。这里可以修改props或者state，但是很危险,都是重新运行一遍生命周期。

componentWillUpdate：在修改props或者state即将渲染时运行的生命周期。可以修改state或者props，但是很危险,都是重新运行一遍生命周期。

componentDidUpdate：在修改props或者state渲染完render运行的生命周期。可以修改state或者props，但是很危险,都是重新运行一遍生命周期。

getDerivedStateFromProps: 无论什么情况下都是第一个运行的生命周期。这个生命周期是类的静态方法，这个函数返回一个对象(必须得是对象或者数组)来更新state的数据。

更新当前的state和新的即将要更新的新state。不能访问实例，所以不能修改state和props。但是也可以给全局增加一个变量，在componentDidMount的时候赋值实例。这样子可以修改props和state，但是很危险。

这个生命周期在第一次渲染时代替了componentWillMount。

在修改state代替了componentWillUpdate。

在修改props时代替了componentWillReceiveProps和componentWillUpdate生命周期。

getSnapshotBeforeUpdate：在更新props或者state时，在rander渲染完之后在componentDidUpdate之前时运行这个生命周期。作用是返回一个数据，作为componentDidUpdate的第三个参数传入。