react生命周期
react生命周期】
生命周期方法的理解
- 首先生命周期分为三个阶段,他们分别是挂载是,更行时,还有卸载时的生命周期函数
挂载时期的生命周期函数
- 首先我们需要执行constructor构造器函数,来初始化状态(state)和挂载实例方法
- 然后最新的生命周期中去除了
componentWillMount
这个方法 - 添加了
getDerivedStateFromProps()
这个生命周期函数,会在调用 render 方法之前调用,并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state,如果返回 null 则不更新任何内容 - 然后进行到 render()函数 ,渲染dom 挂载到页面上
- 然后是
componentDidMount
这个方法会在组件挂载后(插入 DOM 树中)立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据,此处是实例化请求的好地方 以上是在挂载时期的常用的生命周期函数
更新时的生命周期函数
- 首先在更新时触发
getDerivedStateFromProps()
+ 然后是shouldComponentUpdate()
根据 shouldComponentUpdate() 的返回值,判断 React 组件的输出是否受当前 state 或 props 更改的影响,判断是否更新组件,默认是true
表示重新渲染组件 - 然后才是
render()
方法 - 然后是
getSnapshotBeforeUpdate()
渲染输出(提交到 DOM 节点)之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息 - 然后是
componentDidUpdate
这个函数是在数据更新之后,并且dom上的数据也更新之后才会触发的函数
销毁阶段的生命周期函数
componentWillUnmount
会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作
另外关于render()函数的理解
- 个人理解 render函数只是把组件渲染成了虚拟dom元素,挂载的这个操作应该不是render这个方法执行的。