生命周期方法

现在是时候真正接触 API，不再局限于示例数据了。如果你还不熟悉，我建议你阅读我关于如何了解 API 的文章。

在我们首次深入理解这个概念时，我们将使用 Hacker News，这是一个专注于科技话题的可靠新闻聚合平台。在这个练习中，我们将使用 Hacker News API 获取热门新闻。该平台提供了 基础 API 和 搜索 API，用于获取数据。由于我们正在构建的应用需要搜索功能，因此搜索 API 将非常适用。请访问 API 规范文档，以了解数据结构。

## 生命周期方法 你可能还记得，在上一章中我们简要提到了生命周期方法，它们是 React 组件生命周期中的钩子。这些方法仅适用于 ES6 类组件，不适用于函数式无状态组件。除了 `render()` 方法外，React ES6 类组件中还有多个可以重写的生命周期方法，它们统称为生命周期方法。

挂载阶段

我们已经介绍了两个可以在 ES6 类组件中使用的生命周期方法：

• constructor 只在组件实例被创建并插入 DOM 时调用。组件的创建过程称为挂载。
• render() 方法在挂载过程中也会被调用，同时在组件更新时也会被调用。每当组件的状态或属性发生变化时，render() 方法都会被触发。

在挂载阶段还有两个额外的生命周期方法：getDerivedStateFromProps() 和 componentDidMount()。调用顺序为：先执行 constructor，然后是 getDerivedStateFromProps()（在 render() 之前），最后是 componentDidMount()（在 render() 之后）。

总体而言，挂载过程包含四个生命周期方法，按以下顺序执行：

• constructor()
• getDerivedStateFromProps()
• render()
• componentDidMount()

### 更新阶段 当组件的状态或属性发生变化时，会触发更新生命周期。该阶段包含五个生命周期方法，按以下顺序执行： * getDerivedStateFromProps() * shouldComponentUpdate() * render() * getSnapshotBeforeUpdate() * componentDidUpdate()

卸载阶段

最后是卸载生命周期，它只有一个生命周期方法：componentWillUnmount()。

### 各生命周期方法说明 你不需要一开始就掌握所有生命周期方法，即使在大型 React 应用中，你也只会用到其中少数几个，除了 `constructor()` 和 `render()` 外。但了解每个方法的用途仍然很有帮助： * **constructor(props)**：组件初始化时调用。你可以在该方法中设置初始状态，绑定类方法。 * **static getDerivedStateFromProps(props, state)**：在 `render()` 方法之前调用，无论是初次挂载还是后续更新都会触发。它应返回一个对象来更新状态，或返回 null 表示不更新。此方法适用于极少数场景，即状态依赖于 props 随时间的变化。需要注意的是，这是一个静态方法，无法访问组件实例。 * **render()**：必须实现的生命周期方法，返回组件的输出元素。该方法应保持纯净，不应修改组件状态。它接收 props 和 state 作为输入，并返回一个元素。 * **componentDidMount()**：组件挂载完成后只调用一次。这是发起异步请求、从 API 获取数据的最佳时机。获取的数据可存储在组件本地状态中，以便在 `render()` 方法中展示。 * **shouldComponentUpdate(nextProps, nextState)**：当组件因状态或属性变化而更新时总会被调用。在成熟的 React 应用中，它常用于性能优化。根据你返回的布尔值，决定组件及其子组件是否重新渲染。你可以阻止组件的 `render()` 方法执行。 * **getSnapshotBeforeUpdate(prevProps, prevState)**：在最新渲染结果提交到 DOM 之前调用。在极少数情况下，组件需要在 DOM 被更改前捕获某些信息。该方法允许组件完成这一操作。另一个方法 `componentDidUpdate()` 会接收到 `getSnapshotBeforeUpdate()` 返回的值作为参数。 * **componentDidUpdate(prevProps, prevState, snapshot)**：在更新完成后立即调用，但不会在初始渲染时触发。可用于执行 DOM 操作或发起新的异步请求。如果组件实现了 `getSnapshotBeforeUpdate()`，其返回值将作为 `snapshot` 参数传入。 * **componentWillUnmount()**：在组件销毁前调用。可用于执行清理任务，例如取消定时器、清除事件监听器或释放资源。 如你所见，`constructor()` 和 `render()` 是 ES6 类组件中最常用的生命周期方法。`render()` 方法始终是必需的，必须返回组件的输出元素。 最后，`componentDidCatch(error, info)` 是在 [React 16](https://www.robinwieruch.de/what-is-new-in-react-16/) 中引入的，用于捕获组件中的错误。例如，你的应用中显示示例列表时一切正常，但可能在某个时刻，由于从外部 API 获取数据失败，导致本地状态中的列表被意外设为 `null`。此时尝试对 `null` 值进行过滤和遍历就会出错，组件将崩溃，整个应用也可能失效。通过使用 `componentDidCatch()`，你可以捕获此类错误，将其存入本地状态，并向用户显示提示信息。

进一步阅读：

• 阅读关于 React 中的生命周期方法
• 阅读关于 与生命周期相关的状态管理
• 阅读关于 组件中的错误处理