react组件生命周期_基于类的React组件的创建生命周期

react组件生命周期

生命周期挂钩 (Lifecycle hooks)

After React Hooks were introduced in React 16.8, lifecycle hooks — which were only available in class-based components, are now also available in functional components with the help of the useEffect hook.

在React 16.8中引入React Hooks之后，生命周期钩子(仅在基于类的组件中可用)现在在useEffect钩子的帮助下在功能组件中也可用。

Although useEffect gives us similar control over the lifecycle of a component, lifecycle hooks are only available in class-based components.

尽管useEffect为我们提供了对组件生命周期的类似控制，但是生命周期挂钩仅在基于类的组件中可用。

The following are the lifecycle hooks called during the creation of a class-based component:

以下是在创建基于类的组件期间调用的生命周期挂钩：

基于类的组件的创建生命周期 (Creation lifecycle of a class-based component)

1.构造函数 (1. Constructor)

When a component is to be created, the first thing that runs is not a lifecycle hook but the component’s constructor. The constructor is a default ES6 class feature and gets added to a class automatically if we do not specify one. A constructor can be used to set the initial state of the component, initialize variables, and bind functions. Since the constructor is essential in a class, it is called before the lifecycle hooks when creating a class-based component.

创建组件时，首先运行的不是生命周期挂钩，而是组件的构造函数 。 构造函数是ES6的默认类功能，如果我们未指定，则自动将其添加到类中。 构造函数可用于设置组件的初始状态，初始化变量和绑定函数。 由于构造函数在类中是必不可少的，因此在创建基于类的组件时会在生命周期挂钩之前调用它。

2. getDerivedStateFromProps (2. getDerivedStateFromProps)

After the constructor, getDerivedStateFromProps runs. It is invoked right before the render function does. getDerivedStateFromProps is called during the initial mount of the component and on subsequent updates.

构造函数之后， getDerivedStateFromProps运行。 它在render函数执行之前被调用。 在组件的初始安装和后续更新期间调用getDerivedStateFromProps 。

It is a rarely used lifecycle hook, for when the state of our component has to be derived from changes made in props over time. The reason this lifecycle hook is not used often is due to simpler alternatives available. These alternatives make our code less verbose and are thus used instead of this hook. That being said, this hook is not completely useless.

这是一个很少使用的生命周期挂钩，因为当组件的状态必须从随时间变化的props中得出时。 之所以不经常使用此生命周期挂钩，是因为存在更简单的替代方法。 这些替代方法使我们的代码不太冗长，因此代替了此钩子。 话虽如此，这个钩子并非完全没有用。

One handy use-case would be using it to implement a <Transition> component that compares its previous and next children to determine which of them should be animated. You can read more about this lifecycle hook on the React docs page.

一个方便的用例将使用它来实现一个<Transition>组件，该组件比较其上一个和下一个子项，以确定应为其动画的子项。 您可以在React docs页面上阅读有关此生命周期挂钩的更多信息。

3. render() (3. render())

After invoking the constructor of the component and the getDerivedStateFromProps lifecycle hook, the render function is called. It returns all of our JSX.

调用组件的构造函数和getDerivedStateFromProps生命周期挂钩之后，将调用render函数。 它返回我们所有的JSX。

The render function should remain pure and should only be used to prepare the data we would need to render the JSX. Any HTTP requests or timeouts that can block the rendering process should not be used here.

渲染函数应保持纯净，并且仅应用于准备渲染JSX所需的数据。 此处不应使用任何可能阻止呈现过程的HTTP请求或超时。

4. componentDidMount (4. componentDidMount)

After the JSX from the render function finishes rendering, componentDidMount is invoked. Asynchronous tasks like HTTP requests can be run here. For example, if you need to fetch data from a remote endpoint, this is a good place to do that.

渲染函数中的JSX完成渲染后，将调用componentDidMount 。 诸如HTTP请求之类的异步任务可以在此处运行。 例如，如果您需要从远程端点获取数据，那么这是一个不错的选择。

Initialization that requires DOM elements is done here.

需要DOM元素的初始化在这里完成。

结语 (Wrapping up)

There are several hooks involved during the lifecycle of a class-based React component. The hooks mentioned in this article are the ones that are involved during the creation of a component. When the component is updated, there are a few more hooks that are invoked. We will go over them in the next article.

在基于类的React组件的生命周期中涉及多个钩子。 本文提到的钩子是组件创建过程中涉及的钩子。 当组件被更新时，还有更多的钩子被调用。 我们将在下一篇文章中详细介绍它们。

Originally published on my blog.

最初发布在 我的博客上 。

翻译自: https://medium.com/weekly-webtips/creation-lifecycle-of-a-class-based-react-component-8ef3202598cd

react组件生命周期