react生命周期

最新推荐文章于 2025-04-20 23:45:00 发布

哆啦贝儿

最新推荐文章于 2025-04-20 23:45:00 发布

阅读量98

点赞数

文章标签： react

本文链接：https://blog.youkuaiyun.com/qq_40436793/article/details/108956232

版权

本文详细介绍了React组件的生命周期方法，包括构造器(constructor)、getDerivedStateFromProps、render、componentDidMount、shouldComponentUpdate、getSnapshotBeforeUpdate和componentDidUpdate，以及它们在实际开发中的应用和注意事项。

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

（1）constructor：初始化state
（2）getDerivedStateFromProps(nextProps, prevState)：在render前被调用，接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state；配合componentDidupdate，可以覆盖componentwillReceiveProps的所有用法
注意：getDerivedStateFromProps是一个静态函数，也就是这个函数不能通过this访问到class的属性，也并不推荐直接访问属性。而是应该通过参数提供的nextProps以及prevState来进行判断，根据新传入的props来映射到state。
（3）render()：创建虚拟dom，进行diff算法，更新dom树
（4）componentDidMount()：组件挂载后调用，只调用一次，可以在此阶段发送ajax请求
（5）shouldComponentUpdate(nextProps, nextState)：组件接收到新的props或者state时调用，return true就会更新dom(使用diff算法更新〉，return false能阻止更新（不调用render）
（6）getSnapShotBeforeUpdate(prevProps, prevState)：update发生的时候，在render之后，组件dom渲染之前触发；返回一个值，作为componentDidupdate的第三个参数；配合componentDidupdate，可以覆盖componentwillupdate的所有用法
（7）componentDidUpdate()：组件更新后调用
（8）componentWillUnmount()：组件卸载前调用