聊聊React的生命周期

最新推荐文章于 2022-03-23 12:53:48 发布

feral_coder

最新推荐文章于 2022-03-23 12:53:48 发布

阅读量103

点赞数

分类专栏：前端 js 文章标签： react

本文链接：https://blog.csdn.net/feral_coder/article/details/95314866

版权

50 篇文章 2 订阅

订阅专栏

26 篇文章 1 订阅

订阅专栏

前言：react的生命周期描述了react组件从初始化，组件运行，更新和销毁的整个过程，其中react为某些生命周期环节提供了钩子函数，便于开发者进行业务逻辑编写。

1、初始化阶段

getDefaultProps：获取初始化props，由组件内部调用，不提供钩子函数，在初始化state之前
initState：初始化state，constructor()中初始化state
static getDerivedStateFromProps(preProps,preState)：这是一个静态方法，每次在re-rendering之前调用，此方法用来替代componentWillMount和componentWillReceiveProps，componentWillMount和componentWillReceiveProps因为安全性问题即将被抛弃。里面两个参数分别保存了上一次更新时的props与state。此函数必须返回一个值，如果props传入的内容不需要影响到你的state，那么就需要返回一个null，这个返回值是必须的，所以尽量将其写到函数的末尾。
render()：调用render函数，生成虚拟dom,diff算法，渲染UI
componentDidMount()：组件渲染完成时的钩子函数

2、运行阶段

static getDerivedStateFromProps(preProps,preState)：state或者props改变导致组件重新渲染
shouldComponentUpdate()：render之前，可以根据其返回值来判断是否重新渲染，若返回true则重新渲染，反之则不渲染
render()：重新渲染
getSnapshotBeforeUpdate(preProps,preState)：在最近一次渲染输出（提交到dom）之前调用，它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。必须返回一个值或者null
componentDidUpdate(preProps,preState,snapshot)：组件更新之后的钩子函数

3、销毁阶段

图解：

关注