react生命周期总结

react生命周期

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这个方法执行的。