react组件生命周期_更新基于类的React组件的生命周期

react组件生命周期

更新生命周期 (Update lifecycle)

The previous article was about the lifecycle hooks of a class-based component when it is being created. In this article, we will see the hooks that come into play when a class-based component is updated.

上一篇文章是关于基于类的组件在创建时的生命周期挂钩的。 在本文中，我们将看到更新基于类的组件时使用的挂钩。

何时更新组件？ (When is a component updated?)

A component is updated when there are changes made to the component’s props or state. When this happens, the component is re-evaluated and goes through a different lifecycle than the creation lifecycle.

更改组件的属性或状态时，将更新该组件。 发生这种情况时，将重新评估组件，并经历与创建生命周期不同的生命周期。

1. getDerivedStateFromProps (1. getDerivedStateFromProps)

Since this hook gives us state derived from the changes in props, it is the very first lifecycle hook invoked when a component is updated.

由于此挂钩为我们提供了根据道具更改而得出的状态，因此它是在更新组件时调用的第一个生命周期挂钩。

It checks whether there have been any changes made to the props and derives the new state from these changes. Just like in the creation lifecycle, this lifecycle hook is rarely necessary, since there will most probably be a more elegant solution available.

它检查是否对道具进行了任何更改，并从这些更改中得出新状态。 就像在创建生命周期中一样，此生命周期挂钩几乎是不必要的，因为很可能会有更优雅的解决方案可用。

2. shouldComponentUpdate (2. shouldComponentUpdate)

This lifecycle hook is invoked after getDerivedStateFromProps and before the render function and allows us to cancel the update process. It can be used to let React know whether the changes in the state or props of the component affect the component’s output. For performance optimizations, we can then decide whether React should continue updating and re-rendering the component.

此生命周期挂钩在getDerivedStateFromProps之后且在render函数之前调用，并允许我们取消更新过程。 它可以用于让React知道组件的状态或属性的变化是否会影响组件的输出。 为了优化性能，我们可以决定React是否应该继续更新和重新渲染组件。

By default, a component will re-render on every state change, but with this hook, we can prevent unnecessary re-renders. This makes this hook pretty powerful since we can prevent unnecessary render cycles. But, if done incorrectly, we might end up blocking an update and break the component.

默认情况下，组件会在每次状态更改时重新渲染，但是使用此挂钩，我们可以防止不必要的重新渲染。 由于我们可以防止不必要的渲染周期，因此此挂钩非常强大。 但是，如果操作不正确，我们可能最终会阻止更新并破坏组件。

React docs recommend using PureComponent if you are not confident of manually implementing shouldComponentUpdate.

React文档推荐使用PureComponent如果你没有信心的手动实现shouldComponentUpdate。

3.渲染 (3. render)

Next comes the render function. If shouldComponentUpdate returns false, which means the component should not update, the render function is not invoked.

接下来是渲染功能。 如果shouldComponentUpdate返回false，这意味着该组件不应该更新，渲染功能则不会调用。

During the creation lifecycle, the render function evaluates all the JSX and renders the component to the DOM. During the update lifecycle, however, after evaluating the JSX, the render function constructs the virtual DOM and checks if it needs to update the real DOM. If an update is necessary, instead of updating the entire DOM, it compares the virtual DOM and the real DOM and makes changes to only those parts which need updating.

在创建生命周期中，render函数评估所有JSX并将组件呈现为DOM。 但是，在更新生命周期中，在评估JSX之后，render函数构造虚拟DOM并检查是否需要更新实际DOM。 如果需要更新，则不更新整个DOM，而是比较虚拟DOM和真实DOM，并仅对那些需要更新的部分进行更改。

This means changing a button’s color will only update that button and not the entire page.

这意味着更改按钮的颜色只会更新该按钮，而不会更新整个页面。

4. getSnapshotBeforeUpdate (4. getSnapshotBeforeUpdate)

Although getSnapshotBeforeUpdate comes after the render function in the update lifecycle of a React component, it is invoked right before any updates are actually committed to the real DOM. This is also a lifecycle hook that is not used often and is mostly used for last-minute operations like capturing some information from the DOM before it is updated.

尽管getSnapshotBeforeUpdate在React组件的更新生命周期中位于render函数之后，但它会在将任何更新实际提交给实际DOM之前立即调用。 这也是一个生命周期钩子，不经常使用，并且主要用于最新操作，例如在更新之前从DOM捕获某些信息。

This hook receives the previous state and props as parameters and can either return a snapshot object or null. One use-case of this hook is for capturing the scroll position on the page before the DOM is updated and setting the current scroll position to that value. This will make sure that even after the DOM is re-rendered, the scroll position will remain the same.

该挂钩接收先前的状态和prop作为参数，并且可以返回快照对象或null。 该挂钩的一个用例是在更新DOM之前捕获页面上的滚动位置并将当前滚动位置设置为该值。 这样可以确保即使在重新渲染DOM之后，滚动位置也将保持不变。

Any value returned by getSnapshotBeforeUpdate is passed as a parameter to componentDidUpdate.

getSnapshotBeforeUpdate返回的任何值都作为参数传递给componentDidUpdate 。

5. componentDidUpdate (5. componentDidUpdate)

This hook is invoked after the render function has finished executing and the DOM has been updated. This hook is not called on the initial render of the page but when the component is updated.

在渲染函数完成执行并且DOM已更新之后， 将调用此挂钩。 在页面的初始渲染时不会调用此挂钩，而是在组件更新时调用。

Asynchronous tasks like executing HTTP requests can be done in this hook. Although updating state in this hook will not block the updating process since the rendering has finished, we still need to take care since we might end up in an infinite loop of re-renders.

诸如执行HTTP请求之类的异步任务可以在此挂钩中完成。 尽管自渲染完成以来，此挂钩中的更新状态不会阻止更新过程，但我们仍需小心，因为我们可能会陷入无限渲染的循环中。

If you need to update the state, make sure to use setState() inside a Promise to avoid causing an unnecessary re-render. While this re-render will not cause any visible changes, it will still affect the component’s performance.

如果需要更新状态，请确保在Promise中使用setState()以避免引起不必要的重新渲染。 尽管此重新渲染不会引起任何可见的变化，但仍会影响组件的性能。

This hook takes the previous state and props, before the component was updated, as arguments. The previous props can be compared to the current props to check whether it is necessary to execute a network request if the prop has changed. If your component implements the rarely-used getSnapshotBeforeUpdate() lifecycle hook, then componentDidUpdate() will receive a third argument — snapshot. If getSnapshotBeforeUpdate() has not been implemented, the third argument will be undefined.

该挂钩将组件更新之前的先前状态和道具作为参数。 可以将先前的道具与当前的道具进行比较，以检查如果道具已更改，是否有必要执行网络请求。 如果你的组件实现了很少使用的getSnapshotBeforeUpdate()生命周期挂钩，则componentDidUpdate()将获得第三个参数- 快照 。 如果尚未实现getSnapshotBeforeUpdate() ，则第三个参数将不确定。

Note: If shouldComponentUpdate() returns false, componentDidUpdate() will not be invoked

注意：如果shouldComponentUpdate()返回false，则不会调用componentDidUpdate()

结语 (Wrapping up)

These are the lifecycle hooks which are invoked when a component goes through an update. In the next article, we will see the useEffect hook which can be used in a functional component in place of these lifecycle hooks.

这些是生命周期挂钩，当组件进行更新时会调用它们。 在下一篇文章中，我们将看到useEffect挂钩，可以在功能组件中使用它们代替这些生命周期挂钩。

Originally published on my blog.

最初发布在 我的博客上 。

翻译自: https://itnext.io/update-lifecycle-of-a-class-based-react-component-f0cb800a8aca

react组件生命周期