解读Reactv16+最新生命周期使用场景

React更新到v16版本之后&＃xff0c;像是跨入了新的时代&＃xff0c;性能和新的 API 都令人瞩目&＃xff0c;所以出现了比较大的生命周期方法调整&＃xff0c;包括使用方法和使用场景&＃xff0c;本章节针对新旧的生命周期的使用方法及使用场景分别详细介绍描述总结&＃xff1b;

在介绍生命周期之前&＃xff0c;我们首先需要搞清楚React生命周期的几个阶段&＃xff1a;

• Mounting&＃xff08;加载阶段&＃xff09;
• Updating&＃xff08;更新阶段&＃xff09;
• Unmounting&＃xff08;卸载阶段&＃xff09;

从上面几个生命期可以发现&＃xff0c;非常类似与Vue的生命期&＃xff1a;创建前后&＃xff0c;加载前后&＃xff0c;更新前后&＃xff0c;销毁前后

首先我们来了解下React更新到16后&＃xff0c;生命周期发生了哪些更改&＃xff1a;

• React V16.3 新增的生命周期方法

  • getDerivedStateFromProps()
  • getSnapshotBeforeUpdate()

• 逐渐废弃的生命周期方法&＃xff08;目前还能使用&＃xff0c;需要加UNSAFE_前缀&＃xff09;&＃xff1a;

  • componentWillMount()
  • componentWillReceiveProps()
  • componentWillUpdate()

旧的生命周期流程

1、在旧的生命周期&＃xff0c;我们来看看相对应的 加载、更新、卸载 过程

• Mounting 加载过程&＃xff08;6个&＃xff09;: constructor()、getDefaultProps()、getInitialState()、componentWillMount()、render()、componentDidMount()
• Updating 更新过程&＃xff08;5个&＃xff09;&＃xff1a;componentWillReceivePorps()、shouldComponentUpdate()、componentWillUpdata()、render()、componentDidUpdate()
• Unmounting 卸载过程&＃xff08;1个&＃xff09;&＃xff1a;componentWillUnmount()

当然这些生命周期的每个钩子函数的作用是什么可以查看&＃xff1a;查看更多

2、组件的基本写法如下&＃xff1a;

import React, { Component } from &＃39;react&＃39;export default class OldReactComponent extends Component {constructor(props) {super(props)// getDefaultProps&＃xff1a;接收初始props// getInitialState&＃xff1a;初始化state}state &＃61; {}componentWillMount() { // 组件挂载前触发}render() {return (<h2>Old React.Component</h2>)}componentDidMount() { // 组件挂载后触发}componentWillReceivePorps(nextProps) { // 接收到新的props时触发}shouldComponentUpdate(nextProps, nextState) { // 组件Props或者state改变时触发&＃xff0c;true&＃xff1a;更新&＃xff0c;false&＃xff1a;不更新return true}componentWillUpdate(nextProps, nextState) { // 组件更新前触发}componentDidUpdate() { // 组件更新后触发}componentWillUnmount() { // 组件卸载时触发}
}


新的生命周期流程

我们现在来看看新的生命周期&＃xff0c;如下图所示&＃xff1a;

新增加的生命周期钩子有&＃xff1a;

• getDerivedStateFromProps()
• getSnapshotBeforeUpdate()

1、首先我们来看看这个getDerivedStateFromProps()的使用

static getDerivedStateFromProps(nextProps, prevState) {//根据nextProps和prevState计算出预期的状态改变&＃xff0c;返回结果会被送给setState}


• 触发时间(v16.4修正)&＃xff1a;组件每次被render的时候&＃xff0c;包括在组件构建之后(虚拟dom之后&＃xff0c;实际dom挂载之前)&＃xff0c;每次获取新的props或state之后。
• 每次接收新的props之后都会返回一个对象作为新的state&＃xff0c;返回null则说明不需要更新state.
• 配合componentDidUpdate&＃xff0c;可以覆盖componentWillReceiveProps的所有用法
• getDerivedStateFromProps是一个静态函数&＃xff0c;所以函数体内不能访问this&＃xff0c;输出完全由输入决定。

2、 接着我们来看看getSnapshotBeforeUpdate()的使用

• 触发时间: update发生的时候&＃xff0c;在render之后&＃xff0c;在组件dom渲染之前。
• 返回一个值&＃xff0c;作为componentDidUpdate的第三个参数。
• 配合componentDidUpdate, 可以覆盖componentWillUpdate的所有用法。

3、在新的生命周期&＃xff0c;我们来看看相对应的 加载、更新、卸载 过程

• Mounting 加载过程&＃xff08;4个&＃xff09;: constructor()、static getDerivedStateFromProps(props, state)、render()、componentDidMount()
• Updating 更新过程&＃xff08;5个&＃xff09;&＃xff1a;static getDerivedStateFromProps(props, state)、shouldComponentUpdate()、render()、getSnapshotBeforeUpdate(prevProps, prevState)、componentDidUpdate()
• Unmounting 卸载过程&＃xff08;1个&＃xff09;&＃xff1a;componentWillUnmount()
• Error Handling(错误处理) : componentDidCatch(error&＃xff0c;info)

当然这些生命周期的每个钩子函数的作用是什么可以查看&＃xff1a;查看更多

4、组件的基本写法

import React, { Component } from &＃39;react&＃39;export default class NewReactComponent extends Component {constructor(props) {super(props)// getDefaultProps&＃xff1a;接收初始props// getInitialState&＃xff1a;初始化state}state &＃61; {}static getDerivedStateFromProps(props, state) { // 组件每次被rerender的时候&＃xff0c;包括在组件构建之后(虚拟dom之后&＃xff0c;实际dom挂载之前)&＃xff0c;每次获取新的props或state之后&＃xff1b;;每次接收新的props之后都会返回一个对象作为新的state&＃xff0c;返回null则说明不需要更新statereturn state}componentDidCatch(error, info) { // 获取到Javascript错误}render() {return (<h2>New React.Component</h2>)}componentDidMount() { // 挂载后} shouldComponentUpdate(nextProps, nextState) { // 组件Props或者state改变时触发&＃xff0c;true&＃xff1a;更新&＃xff0c;false&＃xff1a;不更新return true}getSnapshotBeforeUpdate(prevProps, prevState) { // 组件更新前触发}componentDidUpdate() { // 组件更新后触发}componentWillUnmount() { // 组件卸载时触发}
}