一文读懂React新旧生命周期

React16版本和17版本生命周期详述

提示：React官方推出的17版本,生命周期做出了改变

---

提示：这篇文章让你轻松明白React生命周期

---

一、React16版本生命周期

人们一般分成三个阶段来解读这幅图:分别是初次挂载、更新、卸载,本文也是围绕这三个点来描述

1.初次挂载

1.constructor()           // 作用:构造函数,可以完成statemprops初始化(开发中使用不多)
2.componentWillMount()	  // 作用:组件将挂载前(开发中使用不多)
3.render()				  // 作用:返回虚拟dom,最终渲染为真实dom(必须使用)
4.componentDidMount()	  // 作用:组件挂载完成后,一般可以发起ajax请求,开启定时器,订阅消息等操作(经常使用)
这就是初次渲染的执行顺序

2.更新阶段

更新阶段由被分成三种情况:1.setState() 2.forceUpdate() 3.父组件的更新导致子组件更新

2.1 通过setState()完成更新

通过setState更新顺序:
1.shouldComponentUpdate()  // 作用: 控制组件更新的阀门  若是省略这个函数不写,react会默认人会返回true,如果在类中写了,一定要返回布尔值
2.componentWillUpdate()	   // 作用: 组件数据将要被更新的生命周期函数
3.render()					
4.componentDidUpdate()	   // 作用: 组件数据状态更新完成后

2.2 通过forceUpdate()强制更新

通过forceUpdate()强制更新与setState()相比就是少了一个shouldComponentUpdate()
1.componentWillUpdate()	   
2.render()					
3.componentDidUpdate()	   

2.3 父组件的状态改变导致子组件的更新

与seyState()不同的是多了一个生命周期钩子函数:componentWillReceiveProps
生命周期的执行顺序如下

1.componentWillReceiveProps()  
2.shouldComponentUpdate()  
3.componentWillUpdate()	   
4.render()					
5.componentDidUpdate()	   

componentWillReceiveProps()注意点:
1.子组件初次不会执行
2.只有当父组件的state发生变化导致props变化是后执行

3.卸载阶段

可以通过组件切换触发, 俗称:他杀
还能用过ReactDOM.unmountComponentAtNode(DOM节点) 俗称:自杀

componentWillUnmount()  // 作用: 组件将要被卸载:=,一般执行收尾工作:比如取消消息订阅,关闭定时器等

二、React17版本生命周期

1.挂载阶段

1.constructor()               // 与16版本相同
2.getDerivedStateFromProps()  // 使用极其罕见,当组件状态完全取决于props可以考虑使用
3.render()					  // 与16版本相同
4.componentDidMount()		  // 与16版本相同	

2.更新阶段

与16.x相同的是有三种方式引起状态改变

2.1 通过setState()导致组件更新

通过setState更新顺序:
1.getDerivedStateFromProps()
2.shouldComponentUpdate()  // 和16版本相同
3.render()		
4.getSnapshotBeforeUpdate()			
5.componentDidUpdate()	   // 作用: 组件数据状态更新完成后

2.2通过forceUpdate()强制更新 (也叫无状态更新组件)

1.getDerivedStateFromProps()
2.render()		
3.getSnapshotBeforeUpdate()			
4.componentDidUpdate()	   // 作用: 组件数据状态更新完成后

与setState()区别就在于:不用通过shouldComponentUpdate()

2.3 通过父组件更新与setState()完全一致

3. 卸载

React在16和17两个版本中对卸载没有发生改变

componentWillUnmount()   // 组件卸载前执行

总结

• getDerivedStateFromProps
  • 使用场景:当组件state状态完全取决于props时候可以使用
  • 注意点:
    • 开发使用极其少见,是类原型上的方法 所以需要加上static关键字
    • 返回值是状态对象,函数能接收传输过来props的作为参数,必须要有返回值
• getSnapshotBeforeUpdate
  • 使用场景:也是少见,可能在一些UI组件中使用
  • 注意点:
    • 函数的返回值,会作为componentWillDidUpdate()生命周期的第三个参数
• 新旧生命周期对比:
  • 废除了三个生命周期钩子
    • componentWillMounted()
    • componentWillUpdate()
    • componentWillReceiveProps()
  • 废除了不是不让使用,会有警告,在17.x版本中,最好是加上UNSAFE_前缀
    • 注意点:
      • 这里的UNSAFE不是代表不安全的意思
      • 是开发人员误用这些生命周期钩子可能在后续的版本中出现意料之外的bug
  • 新增了两个生命周期钩子
    • getDerivedStateFromProps() 横跨了整个初次挂载和更新操作
    • getSnapshotBeforeUpdate() 在更新阶段的render()后在componentDidUpdate()前