React生命周期

谛听

于 2020-01-07 13:10:24 发布

阅读量160

点赞数

分类专栏：前端文章标签： reactjs

本文链接：https://blog.csdn.net/HH921227/article/details/103869919

版权

React组件的生命周期实际是提供给React用于将React元素构建渲染挂载到真实的Dom节点的各个时期的钩子函数。各个生命周期函数提供，使得在开发组件时可以控制各个时期执行不同的操作，如异步的获取数据等。
react生命周期

上图是基于React: '^16.4'的生命周期

组件首次被实例化创建并插入DOM中需要执行的生命周期函数：

constructor()：需要在组件内初始化state或进行方法绑定时，需要定义constructor()函数。不可在constructor()函数中调用setState()。
static getDerivedStateFromProps()：执行getDerivedStateFromProps函数返回我们要的更新的state，React会根据函数的返回值拿到新的属性。
render()：函数类组件必须定义的render()函数，是类组件中唯一必须实现的方法。render()函数应为纯函数，也就是说只要组件state和props没有变化，返回的结果是相同的。其返回结果可以是：1、React元素；2、数组或 fragments；3、Portals；4、字符串或数值类型；5、布尔值或null。不可在render()函数中调用setState()。
componentDidMount()：组件被挂载插入到Dom中调用此方法，可以在此方法内执行副作用操作，如获取数据，更新state等操作。

当组件的props或state改变时会触发更新需要执行的生命周期函数：

static getDerivedStateFromProps()：getDerivedStateFromProps会在调用 render方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新state，如果返回null则不更新任何内容。
shouldComponentUpdate()：根据shouldComponentUpdate()的返回值，判断React组件的是否执行更新操作。React.PureComponent就是基于浅比较进行性能优化的。一般在实际组件实践中，不建议使用该方法阻断更新过程，如果有需要建议使用React.PureComponent。
render()：在组件更新阶段时如果shouldComponentUpdate()返回false值时，将不执行render()函数。
getSnapshotBeforeUpdate()&

关注