React 生命周期

React 生命周期

1、生命周期图

react生命周期函数挂载、卸载只会执行一次，更新会执行多次。

2、生命周期的三个阶段

1）挂载时（创建）

• 执行时机：组件创建时（页面加载时）
• 执行顺序：Constructor() --> render() --> componentDidMount()

钩子函数	触发时机	作用
constructor ()	创建组件时	1,初始化state； 2.为事件处理程序绑定this
render ()	每次组件渲染都会触发	渲染UI（ 注意不能调用setState() ）
componentDidMount ()	组件挂载（完成DOM渲染）后	1.发送网络请求； 2.DOM操作

PS：
Constructor()

• 在js中，类在 new 实例化的时候，系统会默认调用constructor函数，并且调用super(); 当我们定义了构造函数之后，就使用我们定义的。所以我们自己定义的构造函数必须要调用super()，对父类进行初始化。
• 只要使用了constructor()就必须使用super(),否则会导致this指向错误。

render()

• render是类组件中唯一必须使用的函数。render函数会插入jsx生成的Dom结构，生成一份虚拟Dom树，在每次组件更新时，react会通过diff算法，比较新旧dom，找到有差异的节点，重新渲染

2) 更新时

-执行时机：1、setState()；2、forceUpdate()；3、组件收到新的props。以上三种变化都会使组件重新渲染

钩子函数	触发时机	作用
render()	每次组件渲染都会触发	渲染UI
componetDidUpdate()	组件更新（完成Dom渲染）后	1.发送网络请求；2.Dom操作

PS:
componentDidUpdate()
每次重新渲染后都会进入这个生命周期，这里可以拿到更新前的props和state。可以通过判断新旧state调用setState()

3) 卸载时

钩子函数	触发时机	作用
componentWillUnMount()	组件卸载之前	完成组件的卸载和数据的销毁

3、不常用的生命周期函数

1）static getDerivedStatesFromProps( nextProps, pervState) 静态方法生命周期钩子

• 执行时机：会在调用render方法之前调用，并且在初始挂载、更新时都会被调用。它应返回一个对象来更新state，如果返回的是null则不更新任何内容。
• 使用静态方法，可以强制开发者在render之前只做无副作用的操作，而且能做的操作局限在props和state决定新的state而已

2）shouldCompontentUpdate(nextProps, nextState) 是否要更新组件时触发的函数

• 这个生命周期函数是一个开关，判断是否需要更新，主要用来优化性能，调用this.forceUpdate会无视这个钩子，强制更新
• 可以通过比较this.props和nextProps、this.state和nextState来判断状态是否发生改变；状态发生变化，组件会进入渲染流程，renturn false可以阻止组件更新
• 父组件的重新渲染会导致组件重新渲染。可以通过此钩子函数限制子组件是否需要更新

3）getSnapshotBeforeUpdate(prevProps, prevState) 保存状态快照

• 主要用来代替componentWillUpdate生命周期函数。
• 执行时机：会在最终的render之前被调用，它与componentDidUpdate函数中的元素状态是一致的

参考连接：
React生命周期钩子函数