react生命周期

React class components can have hooks for several lifecycle events.

React类组件可以具有多个生命周期事件的挂钩。

Hooks allow function components to access them too, in a different way.

挂钩允许功能组件也以不同的方式访问它们。

During the lifetime of a component, there’s a series of events that gets called, and to each event you can hook and provide custom functionality.

在组件的生存期内，会调用一系列事件，对于每个事件，您都可以挂钩并提供自定义功能。

What hook is best for what functionality is something we’re going to see here.

什么挂钩最适合什么功能，我们将在这里看到。

First, there are 3 phases in a React component lifecycle:

首先，React组件生命周期分为三个阶段：

• Mounting安装
• Updating更新中
• Unmounting正在卸载

Let’s see those 3 phases in detail and the methods that get called for each.

让我们详细了解这三个阶段以及每个阶段调用的方法。

安装 (Mounting)

When mounting you have 4 lifecycle methods before the component is mounted in the DOM: the constructor, getDerivedStateFromProps, render and componentDidMount.

挂载时，在将组件挂载到DOM之前，有4种生命周期方法： constructor getDerivedStateFromProps ， render和componentDidMount 。

建设者 (Constructor)

The constructor is the first method that is called when mounting a component.

构造器是安装组件时调用的第一个方法。

You usually use the constructor to set up the initial state using this.state = ....

通常，您可以使用构造函数通过this.state = ...设置初始状态。

getDerivedStateFromProps() (getDerivedStateFromProps())

When the state depends on props, getDerivedStateFromProps can be used to update the state based on the props value.

当状态取决于道具时，可以使用getDerivedStateFromProps根据道具值更新状态。

It was added in React 16.3, aiming to replace the componentWillReceiveProps deprecated method.

它是在React 16.3中添加的，旨在替换componentWillReceiveProps不推荐使用的方法。

In this method you haven’t access to this as it’s a static method.

在此方法中，您无法访问this因为它是静态方法。

It’s a pure method, so it should not cause side effects and should return the same output when called multiple times with the same input.

这是一个纯方法，因此它不会引起副作用，并且在使用同一输入多次调用时应返回相同的输出。

Returns an object with the updated elements of the state (or null if the state does not change)

返回具有状态更新后的元素的对象(如果状态不变，则返回null)

render() (render())

From the render() method you return the JSX that builds the component interface.

从render()方法中，您返回构建组件接口的JSX。

It’s a pure method, so it should not cause side effects and should return the same output when called multiple times with the same input.

这是一个纯方法，因此它不会引起副作用，并且在使用同一输入多次调用时应返回相同的输出。

componentDidMount() (componentDidMount())

This method is the one that you will use to perform API calls, or process operations on the DOM.

该方法是用于执行API调用或处理DOM上的操作的方法。

更新中 (Updating)

When updating you have 5 lifecycle methods before the component is mounted in the DOM: the getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate and componentDidUpdate.

更新时，在组件安装到DOM中之前有5种生命周期方法： getDerivedStateFromProps ， shouldComponentUpdate ， render ， getSnapshotBeforeUpdate和componentDidUpdate 。

getDerivedStateFromProps() (getDerivedStateFromProps())

See the above description for this method.

有关此方法，请参见上面的描述。

shouldComponentUpdate() (shouldComponentUpdate())

This method returns a boolean, true or false. You use this method to tell React if it should go on with the rerendering, and defaults to true. You will return false when rerendering is expensive and you want to have more control on when this happens.

此方法返回boolean， true或false 。 您可以使用此方法来告知React是否应继续进行重新渲染，并且默认为true 。 当重新渲染的成本很高时，您将返回false ，并且您希望对何时发生重新控制。

render() (render())

See the above description for this method.

有关此方法，请参见上面的描述。

getSnapshotBeforeUpdate() (getSnapshotBeforeUpdate())

In this method you have access to the props and state of the previous render, and of the current render.

在此方法中，您可以访问先前渲染以及当前渲染的道具和状态。

Its use cases are very niche, and it’s probably the one that you will use less.

它的用例非常小众，可能是您将减少使用的一种。

componentDidUpdate() (componentDidUpdate())

This method is called when the component has been updated in the DOM. Use this to run any 3rd party DOM API or call APIs that must be updated when the DOM changes.

当组件已在DOM中更新时，将调用此方法。 使用它来运行任何第三方DOM API或在DOM更改时必须更新的调用API。

It corresponds to the componentDidMount() method from the mounting phase.

从安装阶段开始，它对应于componentDidMount()方法。

正在卸载 (Unmounting)

In this phase we only have one method, componentWillUnmount.

在这一阶段，我们只有一个方法componentWillUnmount 。

componentWillUnmount() (componentWillUnmount())

The method is called when the component is removed from the DOM. Use this to do any sort of cleanup you need to perform.

从DOM中删除组件时，将调用此方法。 使用此功能可以执行您需要执行的任何类型的清理。

遗产 (Legacy)

If you are working on an app that uses componentWillMount, componentWillReceiveProps or componentWillUpdate, those were deprecated in React 16.3 and you should migrate to other lifecycle methods.

如果您正在使用使用componentWillMount ， componentWillReceiveProps或componentWillUpdate的应用程序，则在React 16.3中已弃用了这些应用程序，您应该迁移到其他生命周期方法。

翻译自: https://flaviocopes.com/react-lifecycle-events/

react生命周期