知道什么是React的生命周期及其方法

简单直接地说，生命周期是指React组件在其存在期间所经历的三个阶段。

React中的每一个组件都要经历三个阶段，即。

安装
更新
解除挂载

作为一个React开发者，了解这3个阶段以及与每个阶段相关的方法是很重要的。这些方法可以在类组件中被覆盖，以执行副作用和管理组件的状态。

让我们来看看每个阶段的这些方法。

安装

这是任何组件的初始阶段。它对应的是组件将被插入DOM的时刻。也就是说，当它开始存在于你的浏览器的屏幕上。

在这个阶段，有4个方法按以下顺序执行。

contructor()
getDerivedStateFromProps()
render()
componentDidMount()

在这些方法中，只有第三个方法（render）在创建一个类组件时是必须的。其他的方法则由开发者决定是否在他们的组件中实现。

第一个，constructor ，在React组件中用来设置初始状态值。

getDerivedStateFromProps 方法只用于一个目的：它允许一个组件通过改变道具来更新其状态。请看这里%20和这里%20的两个使用例子。在下面的例子中，我用道具中传递的值设置了计数器的状态。

第三个也是唯一一个必须的是render 。当被调用时，它必须检查this.props和this.state，并返回以下类型之一：一个React元素、一个Portal、一个字符串、一个数字、一个布尔值，或者数值null。渲染方法应该保持纯净，也就是说，不要在其中产生副作用（如API调用）。

import React from "react";

class MyComponent extends React.Component {

    constructor(props){
        super(props);
        this.state = { counter: 0 }
    }

    static getDerivedStateFromProps(props, state) {
        return { counter: props.initialValue }
    }

    render() {
        return <h1>Hello Lifecycle</h1>
    }

    componentDidMount() {
        console.log('Here my component has rendered 😅')
    }
}

如今，你不再需要调用构造函数来初始化一个状态，这就消除了对它的需求。

getDerivedStateFromProps 方法给我们的组件增加了一些复杂性，总的来说你不需要使用它。

React博客上的这篇帖子指出了为什么不使用派生状态

更新

当组件覆盖了一些道具的变化（即它的父组件传递了新的道具），或者内部状态覆盖了一个变化（例如通过this.setState({}) ），组件就进入了更新阶段。

就像在装配阶段一样，将调用一个定义好的方法序列。它们是。

getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

第一个方法，getDerivedStateFromProps ，我们已经知道了，并且在装配阶段已经涵盖。在更新阶段，它的行为也是一样的。

第二个方法，shouldComponentUpdate 将决定序列中的方法是否被执行。也就是说，它将决定该组件是否应该被再次渲染。这个方法的存在只是为了让我们避免不必要的更新，从而优化我们应用程序的性能。

如果this.forceUpdate() 方法已经被调用，那么更新将不调用shouldComponentUpdate，组件将被强制更新，正如其名称所暗示的那样。

**getSnapshotBeforeUpdate** ，然后在最近一次渲染的输出被提交之前被调用。它允许你的组件在DOM可能被改变之前从DOM中抓取一些信息（例如，滚动位置）。

这个生命周期返回的任何值将作为第三个参数传递给componentDidUpdate 方法，称为快照。

随着DOM的更新，**componentDidUpdate** 方法最终被调用。

import React from "react";

class MyComponent extends React.Component {

    static getDerivedStateFromProps(props, state) {
        return null
    }

    shouldComponentUpdate() {
        return true
    }

    render() {
        return <h1>Hello Lifecycle!</h1>
    }

    getSnapshotBeforeUpdate(prevProps, prevState){
        return 'this is the snapshot'
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('Here my component has updated ♥')
    }
}

解除挂载

当组件要从DOM中移除时，通过改变状态或道具，我们就进入了反汇编阶段。

在这里，我们只有一个生命周期方法，那就是。

1. componentWillMount()

这个方法是在组件被移除之前执行的。它被用来删除条目和监听器。一个例子是使用setInterval，即使组件被移除，它也会继续运行，不管调用它的组件是否存在。

import React from "react";

class MyComponent extends React.Component {

    componentWillUnmount() {
        console.log('Here my component will disappear 😢')
    }
}

遗留方法

由于造成混乱和一些难以解决的错误，一些React生命周期方法被废弃了。在17版中，它们仍然可以在名字前面加上UNSAFE\_的前缀来使用。要了解更多关于它们被废弃的原因，[见React博客上的这篇文章]

UNSAFE_componentWillMount()
UNSAFE_componentWillReceiveProps()
UNSAFE_componentWillUpdate()

结语

我希望你现在对什么是生命周期有了更好的认识！这绝对是一个能帮助你在未来建立一个更好、更可预测的UI的概念。

了解React的生命周期

知道什么是React的生命周期及其方法

安装

更新

解除挂载

1. componentWillMount()

遗留方法

结语