不了解一下React16.3之后的新生命周期？

摘要：本文主要介绍之后的生命周期。该方法有两个参数和返回值为对象不需要返回整体，把需要改变的返回即可。必须有一个返回值，返回的数据类型可以有。此生命周期主要用于优化性能。最后，说明一点这三个生命周期在未来版本中会被废弃。

React16.3.0开始，生命周期进行了一些变化。本文主要介绍React16.3.0之后的生命周期。

16版本之前的react组件的生命周期相信大家已经很熟悉。16版本的react对组件的生命周期函数进行了一些修改,下面进行详细说明。

创建期:

constructor(props, context)

componentWillMount()

render()

componentDidMount()

运行时:

props发生变化时

componentWillReceiveProps(nextProps, nextContext)

shouldComponentUpdate(nextProps, nextState, nextContext)

componentWillUpdate(nextProps, nextState, nextContext)

render

componentDidUpdate(prevProps, prevState, snapshot)

state发生变化时

shouldComponentUpdate(nextProps, nextState, nextContext)

componentWillUpdate(nextProps, nextState, nextContext)

render

componentDidUpdate(prevProps, prevState, snapshot)

卸载时

componentWillUnmount()

创建期:

constructor(props, context)

static getDerivedStateFromProps(props, status)

render()

componentDidMount()

或者如下生命周期:

constructor(props, context)

componentWillMount() / UNSAFE_componentWillMount()

render()

componentDidMount()

注意: getDerivedStateFromProps/getSnapshotBeforeUpdate 和 componentWillMount/componentWillReceiveProps/componentWillUpdate 如果同时存在，React会在控制台给出警告信息，且仅执行 getDerivedStateFromProps/getSnapshotBeforeUpdate 【React@16.7.0】

运行时:

props发生变化时

static getDerivedStateFromProps(props, status)

shouldComponentUpdate(nextProps, nextState, nextContext)

render

getSnapshotBeforeUpdate(prevProps, prevState)

componentDidUpdate(prevProps, prevState, snapshot)

或者如下生命周期:

componentWillReceiveProps(nextProps, nextContext)/UNSAFE_componentWillReceiveProps

shouldComponentUpdate(nextProps, nextState, nextContext)

componentWillUpdate(nextProps, nextState, nextContext)

render

componentDidUpdate(prevProps, prevState, snapshot)

state发生变化时

static getDerivedStateFromProps(props, status)

shouldComponentUpdate(nextProps, nextState, nextContext)

render

getSnapshotBeforeUpdate(prevProps, prevState)

componentDidUpdate(prevProps, prevState, snapshot)

或者如下生命周期:

shouldComponentUpdate(nextProps, nextState, nextContext)

componentWillUpdate(nextProps, nextState, nextContext)/UNSAFE_componentWillUpdate

render

componentDidUpdate(prevProps, prevState, snapshot)

销毁时

componentWillUnmount()

新的生命周期图示:

constructor生命周期，如不需要，可缺省。通常会在 constructor 方法中初始化 state 和绑定事件处理程序。
但是，如果写了constructor，那么必须在其中调用super(props);否则可能会引起报错。

如:

class Base extends Component {
    constructor(props) {
        super();  //应该为 super(props);
    }
    state = {
        name: this.props.name
    }
    //....code
}

抛出异常: Uncaught TypeError: Cannot read property "name" of undefined.

同样，如果定义了context,在state中需要使用this.context去获取context上的内容，则需要super(props, context);

不过，如果你缺省constructor,那么在state中，可以放心的使用 this.props 或者是 this.context，不会引起报错。

class Base extends Component {
    state = {
        name: this.props.name,
        color: this.context.color
    }
    //....code
}

初始化的state同样可以在constructor中定义。如果需要给方法绑定this，那么统一在constructor中进行。

当组件的state需要根据props来改变的时候可调用此方法。这个方法是在 render() 前会被执行，每次触发render前，都会触发此方法。

该方法有两个参数props和state; 返回值为state对象, 不需要返回整体state，把需要改变的state返回即可。如果不需要，可以返回null.

class Base extends Component {
    state = {
        age: 20
    }
    static getDerivedStateFromProps(props, state) {
        return {
            age: 50
        }
    }
    render() {
        // 50
        return (
            
{this.state.age}
        )
    }
}

这个方法允许组件基于 props 的变更来更新其内部状态,以这种方式获得的组件状态被称为派生状态。应该谨慎使用派生状态，可能会引入潜在的错误

React组件中必须要提供的方法。当state或者props任一数据有更新时都会执行。

render() 是一个纯函数，因此，不要在其中执行setState诸如此类的操作。render必须有一个返回值，返回的数据类型可以有:

null、String、Number、Array、Boolean。

React elements

Fragment

Portal

注意不要在render中调用setState

componentDidMount()方法是在组件加载完后立即执行，也就是当该组件相关的dom节点插入到dom树中时。该方法在组件生命中只执行一次。
一般情况，我们会在这里setState(),或者进行接口请求，设置订阅等。

class Base extends Component {
    state = {
        age: 20
    }
    componentDidMount() {
        this.fetchDate();
    }
    render() {
        return (
            
{this.state.age}
        )
    }
    //other code
}

在渲染新的props或state前，shouldComponentUpdate被调用，默认返回true。forceUpdate()时不会调用此方法。

如果shouldComponentUpdate()返回false，那么getSnapshotBeforeUpdate,render和componentDidUpdate不会被调用。

此生命周期主要用于优化性能。

在render()的输出被渲染到DOM之前被调用。使组件能够在它们被更改之前捕获当前值（如滚动位置）。这个生命周期返回的任何值都将作为第三个参数传递给componentDidUpdate().

在更新发生后调用 componentDidUpdate()。当组件更新时，将此作为一个机会来操作DOM。如将当前的props与以前的props进行比较（例如，如果props没有改变，则可能不需要网络请求。

如果组件使用 getSnapshotBeforeUpdate()，则它返回的值将作为第三个“快照”参数传递给 componentDidUpdate()。否则，这个参数是undefined。

在组件被卸载并销毁之前立即被调用。在此方法中执行任何必要的清理，例如使定时器无效，取消网络请求或清理在componentDidMount（）中创建的任何监听。

最后，说明一点:

componentWillUpdate,componentWillReceiveProps,componentWillUpdate这三个生命周期在React未来版本中会被废弃。

而UNSAFE_componentWillUpdate,UNSAFE_componentWillReceiveProps,UNSAFE_componentWillUpdate 未来版本中仍可继续使用。

初始化阶段(父组件和子组件):

运行阶段:父组件props/state更新

子组件的shouldComponentUpdate返回false，则子组件其后的生命周期都不在进行，但是父组件的生命周期继续执行。

卸载阶段: 卸载父组件

如果本博文给了您一点启发或者是帮助，请给我的github点颗Star吧:https://github.com/YvetteLau/...

参考:

https://segmentfault.com/a/11...

https://www.jianshu.com/p/514...

https://blog.csdn.net/qq_2931...