class HelloWorld extends React.Component {
 render() {
 return 
 Hello World 
 
 }
}

const MyComponent extends React.Component {
 constructor(props) {
 super(props) 
 this.state = {
 points: 0
 } 
 this.handlePoints = this.handlePoints.bind(this) 
 } 
}

const MyComponent extends React.Component {
 ... 
 static getDerivedStateFromProps() {
 //do stuff here
 } 
}

... 
 static getDerivedStateFromProps(props, state) {
 //do stuff here
 } 
...

... 
 static getDerivedStateFromProps(props, state) { 
 return {
 points: 200 // update state with this
 }
 } 
 ...

... 
 static getDerivedStateFromProps(props, state) {
 return null
 } 
...

class App extends Component {
 state = {
 points: 10
 }
 render() {
 return (
 
 
 
 

 You've scored {this.state.points} points.
 
 
 

class App extends Component {
 state = {
 points: 10
 }
 // *******
 // NB: Not the recommended way to use this method. Just an example. Unconditionally overriding state here is generally considered a bad idea
 // ********
 static getDerivedStateFromProps(props, state) {
 return {
 points: 1000
 }
 }
 render() {
 return (
 
 
 
 

 You've scored {this.state.points} points.
 
 
 

class MyComponent extends React.Component {
 // render is the only required method for a class component 
 render() {
 return 
 Hurray! 
 }
}

class MyComponent extends React.Component {
 render() {
 return "Hurray" 
 }
}

class MyComponent extends React.Component {
 render() {
 return [
 Hello

如果你不想渲染任何内容，可以在 render 方法中返回一个布尔值或 null：

class MyComponent extends React.Component { 
 render() {
 return null
 }
}
class MyComponent extends React.Component {
 // guess what's returned here? 
 render() {
 return (2 + 2 === 5) && 
Hello World
;
 }
}

你还可以从 render 方法返回一个 portal：

class MyComponent extends React.Component {
 render() {
 return createPortal(this.props.children, document.querySelector("body"));
 }
}

关于 render 方法的一个重要注意事项是，不要在函数中调用 setState 或者与外部 API 发生交互。

4. componentDidMount()

在调用 render 后，组件被挂载到 DOM，并调用 componentDidMount 方法。

在将组件被挂载到 DOM 之后会立即调用这个函数。

有时候你需要在组件挂载后立即从组件树中获取 DOM 节点，这个时候就可以调用这个组件生命周期方法。

例如，你可能有一个模态窗口，并希望在特定 DOM 元素中渲染模态窗口的内容，你可以这么做：

class ModalContent extends React.Component {
 el = document.createElement("section");
 componentDidMount() {
 document.querySelector("body).appendChild(this.el);
 }
 // using a portal, the content of the modal will be rendered in the DOM element attached to the DOM in the componentDidMount method. 
}

如果你希望在组件被挂载到 DOM 后立即发出网络请求，可以在这个方法里进行：

componentDidMount() {
 this.fetchListOfTweets() // where fetchListOfTweets initiates a netowrk request to fetch a certain list of tweets. 
}

你还可以设置订阅，例如计时器：

// e.g requestAnimationFrame 
componentDidMount() {
 window.requestAnimationFrame(this._updateCountdown);
 }
// e.g event listeners 
componentDidMount() {
 el.addEventListener()
}

只需要确保在卸载组件时取消订阅，我们将在讨论 componentWillUnmount 生命周期方法时介绍更详细的内容。

挂载阶段基本上就是这样了，现在让我们来看看组件经历的下一个阶段――更新阶段。

每当更改 React 组件的 state 或 props 时，组件都会被重新渲染。简单地说，就是组件被更新。这就是组件生命周期的更新阶段。

那么在更新组件时会调用哪些生命周期方法？

1. static getDerivedStateFromProps()

首先，还会调用 static getDerivedStateFromProps 方法。这是第一个被调用的方法。因为之前已经介绍过这个方法，所以这里不再解释。

需要注意的是，在挂载和更新阶段都会调用这个方法。

2. shouldComponentUpdate()

在调用 static getDerivedStateFromProps 方法之后，接下来会调用 nextComponentUpdate 方法。

默认情况下，或者在大多数情况下，在 state 或 props 发生变更时会重新渲染组件。不过，你也可以控制这种行为。

你可以在这个方法中返回一个布尔值――true 或 false，用于控制是否重新渲染组件。

这个生命周期方法主要用于优化性能。不过，如果 state 和 props 没有发生变更，不希望组件重新渲染，你也可以使用内置的 PureComponent。

3. render()

在调用 shouldComponentUpdate 方法后，会立即调用 render――具体取决于 shouldComponentUpdate 返回的值，默认为 true。

4. getSnapshotBeforeUpdate()

在调用 render 方法之后，接下来会调用

getSnapshotBeforeUpdatelifcycle 方法。

你不一定会用到这个生命周期方法，但在某些特殊情况下它可能会派上用场，特别是当你需要在 DOM 更新后从中获取一些信息。

这里需要注意的是，getSnapshotBeforeUpdate 方法从 DOM 获得的值将引用 DOM 更新之前的值，即使之前调用了 render 方法。

我们以使用 git 作为类比。

在编写代码时，你会在将代码推送到代码库之前暂存它们。

假设在将变更推送到 DOM 之前调用了 render 函数来暂存变更。因此，在实际更新 DOM 之前，getSnapshotBeforeUpdate 获得的信息指向了 DOM 更新之前的信息。

对 DOM 的更新可能是异步的，但 getSnapshotBeforeUpdate 生命周期方法在更新 DOM 之前立即被调用。

如果你还是不太明白，我再举一个例子。

聊天应用程序是这个生命周期方法的一个典型应用场景。

我已经为之前的示例应用程序添加了聊天窗格。

可以看到右侧的窗格吗？

聊天窗格的实现非常简单，你可能已经想到了。在 App 组件中有一个带有 Chats 组件的无序列表：

Chats 组件用于渲染聊天列表，为此，它需要一个 chatList prop。基本上它就是一个数组，一个包含 3 个字符串的数组：[“Hey”, “Hello”, “Hi”]。

Chats 组件的实现如下：

class Chats extends Component {
 render() {
 return (
 
 {this.props.chatList.map((chat, i) => (
 
 {chat}
 
 ))}
 
 );
 }
}

它只是通过映射 chatList prop 并渲染出一个列表项，而该列表项的样式看起来像气泡。

还有一个东西，在聊天窗格顶部有一个“Add Chat”按钮。

看到聊天窗格顶部的按钮了吗？

单击这个按钮将会添加新的聊天文本“Hello”，如下所示：

与大多数聊天应用程序一样，这里有一个问题：每当消息数量超过聊天窗口的高度时，预期的行为应该是自动向下滚动聊天窗格，以便看到最新的聊天消息。大现在的情况并非如此。

让我们看看如何使用 getSnapshotBeforeUpdate 生命周期方法来解决这个问题。

在调用 getSnapshotBeforeUpdate 方法时，需要将之前的 props 和 state 作为参数传给它。

我们可以使用 prevProps 和 prevState 参数，如下所示：

getSnapshotBeforeUpdate(prevProps, prevState) { }

你可以让这个方法返回一个值或 null：

getSnapshotBeforeUpdate(prevProps, prevState) { 
  return value || null // where 'value' is a valid JavaScript value 
}

无论这个方法返回什么值，都会被传给另一个生命周期方法。

getSnapshotBeforeUpdate 生命周期方法本身不会起什么作用，它需要与 componentDidUpdate 生命周期方法结合在一起使用。

你先记住这个，让我们来看一下 componentDidUpdate 生命周期方法。

5. componentDidUpdate()

在调用 getSnapshotBeforeUpdate 之后会调用这个生命周期方法。与 getSnapshotBeforeUpdate 方法一样，它接收之前的 props 和 state 作为参数：

componentDidUpdate(prevProps, prevState) { }

但这并不是全部。

无论从 getSnapshotBeforeUpdate 生命周期方法返回什么值，返回值都将被作为第三个参数传给 componentDidUpdate 方法。

我们姑且把返回值叫作 snapshot，所以：

componentDidUpdate(prevProps, prevState, snapshot) { }

有了这些，接下来让我们来解决聊天自动滚动位置的问题。

要解决这个问题，我需要提醒（或教导）你一些 DOM 几何学知识。

下面是保持聊天窗格滚动位置所需的代码：

getSnapshotBeforeUpdate(prevProps, prevState) {
 if (this.state.chatList > prevState.chatList) {
 const chatThreadRef = this.chatThreadRef.current;
 return chatThreadRef.scrollHeight - chatThreadRef.scrollTop;
 }
 return null;
 }
 componentDidUpdate(prevProps, prevState, snapshot) {
 if (snapshot !== null) {
 const chatThreadRef = this.chatThreadRef.current;
 chatThreadRef.scrollTop = chatThreadRef.scrollHeight - snapshot;
 }
 }

这是聊天窗口：

下图突出显示了保存聊天消息的实际区域（无序列表 ul）。

我们在 ul 中添加了 React Ref：

 ... 

首先，因为 getSnapshotBeforeUpdate 可以通过任意数量的 props 或 state 更新来触发更新，我们将通过一个条件来判断是否有新的聊天消息：

getSnapshotBeforeUpdate(prevProps, prevState) {
 if (this.state.chatList > prevState.chatList) {
 // write logic here
 }
 }

getSnapshotBeforeUpdate 必须返回一个值。如果没有添加新聊天消息，就返回 null：

getSnapshotBeforeUpdate(prevProps, prevState) {
 if (this.state.chatList > prevState.chatList) {
 // write logic here
 } 
 return null 
}

现在看一下 getSnapshotBeforeUpdate 方法的完整代码：

getSnapshotBeforeUpdate(prevProps, prevState) {
 if (this.state.chatList > prevState.chatList) {
 const chatThreadRef = this.chatThreadRef.current;
 return chatThreadRef.scrollHeight - chatThreadRef.scrollTop;
 }
 return null;
 }

我们先考虑一种情况，即所有聊天消息的高度不超过聊天窗格的高度。

表达式

chatThreadRef.scrollHeight - chatThreadRef.scrollTop 等同于

chatThreadRef.scrollHeight - 0。

这个表达式的值将等于聊天窗格的 scrollHeight――在将新消息插入 DOM 之前的高度。

之前我们已经解释过，从 getSnapshotBeforeUpdate 方法返回的值将作为第三个参数传给 componentDidUpdate 方法，也就是 snapshot：

componentDidUpdate(prevProps, prevState, snapshot) { }

这个值是更新 DOM 之前的 scrollHeight。

componentDidUpdate 方法有以下这些代码，但它们有什么作用呢？

componentDidUpdate(prevProps, prevState, snapshot) {
 if (snapshot !== null) {
 const chatThreadRef = this.chatThreadRef.current;
 chatThreadRef.scrollTop = chatThreadRef.scrollHeight - snapshot;
 }
 }

实际上，我们以编程方式从上到下垂直滚动窗格，距离等于

chatThreadRef.scrollHeight - snapshot;。

由于 snapshot 是指更新前的 scrollHeight，上述的表达式将返回新聊天消息的高度，以及由于更新而导致的任何其他相关高度。请看下图：

当整个聊天窗格高度被消息占满（并且已经向上滚动一点）时，getSnapshotBeforeUpdate 方法返回的 snapshot 值将等于聊天窗格的实际高度。

componentDidUpdate 将 scrollTop 值设置为额外消息高度的总和，这正是我们想要的。

在组件卸载阶段会调用下面这个方法。

componentWillUnmount()

在卸载和销毁组件之前会调用 componentWillUnmount 生命周期方法。这是进行资源清理最理想的地方，例如清除计时器、取消网络请求或清理在 componentDidMount() 中创建的任何订阅，如下所示：

// e.g add event listener
componentDidMount() {
 el.addEventListener()
}
// e.g remove event listener 
componentWillUnmount() {
 el.removeEventListener()
 }

错误处理生命周期方法

有时候组件会出现问题，会抛出错误。当后代组件（即组件下面的组件）抛出错误时，将调用下面的方法。

让我们实现一个简单的组件来捕获演示应用程序中的错误。为此，我们将创建一个叫作 ErrorBoundary 的新组件。

这是最基本的实现：

import React, { Component } from 'react';
class ErrorBoundary extends Component {
 state = {};
 render() {
 return null;
 }
}
export default ErrorBoundary;

static getDerivedStateFromError()

当后代组件抛出错误时，首先会调用这个方法，并将抛出的错误作为参数。

无论这个方法返回什么值，都将用于更新组件的状态。

让 ErrorBoundary 组件使用这个生命周期方法：

import React, { Component } from "react";
class ErrorBoundary extends Component {
 state = {};
 static getDerivedStateFromError(error) {
 console.log(`Error log from getDerivedStateFromError: ${error}`);
 return { hasError: true };
 }
 render() {
 return null;
 }
}
export default ErrorBoundary;

现在，只要后代组件抛出错误，错误就会被记录到控制台，并且 getDerivedStateFromError 方法会返回一个对象，这个对象将用于更新 ErrorBoundary 组件的状态。

componentDidCatch()

在后代组件抛出错误之后，也会调用 componentDidCatch 方法。除了抛出的错误之外，还会有另一个参数，这个参数包含了有关错误的更多信息：

componentDidCatch(error, info) { }

在这个方法中，你可以将收到的 error 或 info 发送到外部日志记录服务。与 getDerivedStateFromError 不同，componentDidCatch 允许包含会产生副作用的代码：

componentDidCatch(error, info) {
 logToExternalService(error, info) // this is allowed. 
 //Where logToExternalService may make an API call.
}

让 ErrorBoundary 组件使用这个生命周期方法：

import React, { Component } from "react";
class ErrorBoundary extends Component {
 state = { hasError: false };
 static getDerivedStateFromError(error) {
 console.log(`Error log from getDerivedStateFromError: ${error}`);
 return { hasError: true };
 }
 componentDidCatch(error, info) {
 console.log(`Error log from componentDidCatch: ${error}`);
 console.log(info);
 }
 render() {
 return null
 }
}
export default ErrorBoundary;

此外，由于 ErrorBoundary 只能捕捉后代组件抛出的错误，因此我们将让组件渲染传进来的 Children，或者在出现错误时呈现默认的错误 UI：

... 
render() {
 if (this.state.hasError) {
 return 
Something went wrong.
;
 }
 return this.props.children;
 }

英文原文：

https://blog.logrocket.com/the-new-react-lifecycle-methods-in-plain-approachable-language-61a2105859f3