react生命周期个人理解

react生命周期大致分为三个阶段，挂载，更新，卸载。

下面，先上宝图

下面简单介绍一下

挂载阶段

constructor:

构造函数，最先被执行,我们通常在构造函数里初始化state对象或者给自定义方法绑定this

getDerivedStateFromProps:

static getDerivedStateFromProps(props, state)，这是个静态方法，函数体内不能访问this。getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。由上方的react生命周期图可以看出，在state对象初始化后，会自动调用一次该方法；当state发生改变时，也会调用该方法；如果是一个父子组件，当父组件中的state发生改变而影响到子组件中的值时，子组件中的getDerivedStateFromProps也会自动调用。getDerivedStateFromProps的推出，同时删除了一组生命周期API，包括：

componentWillReceiveProps
componentWillMount
componentWillUpdate

上面三个生命周期API，按照官方说法，将在react 17版本删除，还有在以前需要利用就删除的所有生命周期的函数才能实现的功能，都可以通过getDerivedStateFromProps的帮助来实现。

render:

纯函数，只返回需要渲染的东西,可以返回原生的DOM、React组件。当state props发生变化时，render函数会自动执行。

componentDidMount:

组件挂载之后调用，此时我们可以获取DOM节点并操作，如:canvas操作、浏览器请求等。

更新阶段

getDerivedStateFromProps:

shouldComponentUpdate:

shouldComponentUpdate(nextProps, nextState),有两个参数nextProps和nextState，表示新的属性和变化之后的state，组件被更新之前,会被执行。要求返回一个布尔值,来决定组件是否要更新。

render:

更新阶段也会触发此生命周期

getSnapshotBeforeUpdate:

getSnapshotBeforeUpdate(prevProps, prevState),这个方法在render之后，componentDidUpdate之前调用，有两个参数prevProps和prevState，表示之前的属性和之前的state，这个函数有一个返回值，会作为第三个参数传给componentDidUpdate，如果你不想要返回值，可以返回null，此生命周期必须与componentDidUpdate搭配使用。getSnapshotBeforeUpdate在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给componentDidUpdate。

getSnapshotBeforeUpdate(prevProps, prevState) {
    return 'foo';
 }

 componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(snapshot); //foo
 }

componentDidUpdate:

该方法在getSnapshotBeforeUpdate方法之后被调用，有三个参数prevProps，prevState，snapshot，表示之前的props，之前的state，和snapshot。第三个参数是getSnapshotBeforeUpdate返回的,如果触发某些回调函数时需要用到 DOM 元素的状态，则将对比或计算的过程迁移至 getSnapshotBeforeUpdate，然后在 componentDidUpdate 中统一触发回调或更新状态。如果想简单记忆，一句话：组件更新完成之后会被执行。

销毁阶段

componentWillUnmount:

当组件被卸载或者销毁之前调用,我们可以清除一些定时器,取消网络请求等。

此文写的过程有参考以下：

知乎：程墨Morgan

简书：皮神雷卡丘

网站：zh-hans.reactjs.org/docs/react-…

react生命周期图：projects.wojtekmaj.pl/react-lifec…