React Hooks 文档翻译 - 1 - Introducing Hooks（Hooks 介绍）

翻译自：https://reactjs.org/docs/hooks-intro.html

Hooks 是 React 16.8 新增的功能。它允许你在不编写类的情况下使用状态和其他 React 特性。

import { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

新函数 useState 就是我们要学习的第一个“Hook”。如果对它还没有概念，不必担心，这个例子只是一个预告！

你可以在下一节 学习Hooks。 本文将接着解释为什么我们将 Hooks 添加到 React 中，以及它们如何帮助你编写出色的应用程序。

注意

React 16.8.0 是第一个支持 Hooks 的版本。升级时，不要忘记更新所有包，包括 React DOM。React Native 将在下一个稳定版本中支持 Hooks。

Video Introduction（介绍视频）

在 React Conf 2018 ，Sophie Alpert 和 Dan Abramov 介绍了 Hooks，随后 Ryan Florence 演示了如何重构应用程序来使用它们。
观看视频：(需要科学上网工具，且未翻译)

No Breaking Changes（非重大的更改）

在继续了解前，需要了解关于 Hooks 的以下几点：

• 完全可选的。你可以在几个新的组件中尝试 Hooks，而无需重写任何现有代码。如果你现在不愿意尝试它，完全不必去学习或使用它。
• 100％向后兼容。 Hooks 不包含任何其它的重大更改。
• 现在可用。 随着 v16.8.0 的发布，现在可以使用 Hooks。

没有任何从 React 中删除类的计划。 你可以在本页底部阅读有关 Hooks 逐步采用策略的更多信息。

Hooks 不会取代你对React概念的了解。 相反，Hooks 为你已经知道的 React 概念：props，state，context，refs 和 lifecycle 提供了更直接的API。正如我们稍后将展示的，Hooks 还提供了一种新的强大方式来组合它们。

如果你想立即开始学习Hooks，请直接跳到下一页！ 你还可以继续阅读此页面，进一步了解我们为什么要添加Hooks，以及我们如何在不重写应用程序的情况下开始使用它们。

Motivation（动机）

Hook 解决了过去五年里我们使用 React 编写和维护数以万计的组件时遇到的很多看似无关的问题，但无论你是在学习 React，还是在使用它，或者是更喜欢使用具有类似组件模型的不同库，你可能会遇到其中的一些问题。

It’s hard to reuse stateful logic between components

在组件间公用状态的逻辑很困难

React 没有提供能将可重用行为“附加”到组件的方法（例如，将其连接到一个 store 上）。如果你已经使用了一段时间 React ，你可能熟悉render props 和 高阶组件 等模式，这些模式都试图解决这样的问题。但是这些模式要求你在使用它们时重构组件，这可能会很麻烦并且使代码更难以追踪。如果你从 React DevTools 中查看一个典型的 React 应用程序，你可能会发现一个由多层“生产者”、“消费者”、“高阶组件”、“渲染 props” 和其他抽象层的组件组成的“包装器地狱”。虽然我们可以在 DevTools 中过滤它们，但这指出了一个更深层次的基本问题：React需要提供一个更好的原生的方法来共享状态的逻辑。

使用 Hooks，你可以从组件中提取状态的逻辑，以便可以独立测试并重用。Hooks 允许你在不更改组件层次结构的情况下重用有状态逻辑。这样可以轻松地在许多组件之间或社区间共享 Hooks。

我们将在构建你自己的 Hooks 中进一步讨论。

Complex components become hard to understand

复杂的组件变得很难理解

我们经常需要维护一些开始时很简单，最后演变成了有一堆无法管理的状态逻辑和副作用的混乱的组件。组件的每个生命周期方法通常是一些不相关逻辑的混合。例如，组件可能会在 componentDidMount 和 componentDidUpdate 中执行一些数据获取的行为。但是，同一个 componentDidMount 方法可能还包含一些设置事件侦听器的无关逻辑，并在 componentWillUnmount 中被清理。相互关联的一起产生作用的代码被拆分，而完全不相关的代码最终被组合在一个方法中，这使得错误和不一致的引入变得太容易了。

在许多情况下，将这些组件拆分为较小的组件是不可能的，因为状态的逻辑遍布整个组件，而且测试它们也很困难。这就是许多人更喜欢将 React 与单独的状态管理库相结合的原因之一。然而，这样做通常会引入很多的抽象，要求你在不同的文件之间跳转，并使重用组件变得更加困难。

为了解决这个问题，Hooks 允许你根据相关联的部分（例如监听订阅或获取数据）将一个组件拆分为几个较小的函数，，而不是基于生命周期方法将这些相关联的部分强制拆分。你还可以选择使用 reducer 来管理组件的内部状态，以使其更具可预测性。

我们将在使用 Effect Hook 中更多地讨论这个问题。

Classes confuse both people and machines

“类”让人和机器都很困惑

我们发现“类”除了使代码重用和代码组织更加困难之外，还可能是学习 React 的一大障碍。你必须了解 this 在 JavaScript 中是如何工作的，这与它在大多数语言中的工作方式有很大不同。你必须记住绑定事件处理程序。没有稳定的语法提议，代码非常冗长。人们可以很好地理解 props，state 和自上而下的数据流，但是在艰难地与“类”做斗争。React 中的函数和类组件之间的区别以及何时使用它们，导致即使经验丰富的 React 开发人员之间也存在分歧。

此外，React 已经推出了大约五年了，我们希望确保它在未来五年内保持活跃。正如 Svelte，Angular ，Glimmer 和其他类库所表现的，预编译型组件 具有很大的未来潜力。特别是如果它不限于模板。最近，我们一直在尝试使用 Prepack 进行组件打包，我们已经看到了有希望的早期结果。但是，我们发现类组件可能会产生无意识的模式，导致这些优化回归到较慢的路径。类组件也为今天的工具提出了问题。例如，类不会很好地压缩，并且它们使得热更新加载更加碎片化和不可靠。我们希望提供一种API，使代码更有可能保持在可优化的道路上。

为了解决这些问题，Hooks 允许你在没有类的情况下使用更多 React 的特性。 从概念上讲，React组件一直更接近函数。Hooks 拥抱函数，但不会牺牲 React 的实际精神。Hooks 提供了对命令式方式编程的访问，并且不需要你学习复杂的函数式或响应式编程技术。

Examples

Hooks 概览是开始学习 Hooks 的好地方。

Gradual Adoption Strategy

逐步采用的策略

太长不看版：没有从 React 中移除类组件的计划

我们知道 React 开发人员专注于发布产品，未必有时间研究每次发布中的新 API。 Hooks 是非常新的，在考虑学习或采用它们之前等待更多示例和教程可能会更好。

你可能听说过为 React 添加新语法的标准非常高。对于好奇的读者，我们已经准备了一个详细的RFC，其中包含更多此动机的细节，并提供有关特定设计决策和相关现有技术的额外视角。

至关重要的是，Hooks 与现有代码并行工作，因此你可以逐步采用它们。 不必急于迁移到 Hooks。我们建议避免任何的“重大改写”，特别是对于现有的复杂类组件。开始“使用 Hooks 思考”需要一点精神上的转变。根据我们的经验，最好先在新的和非关键的组件中练习使用 Hooks，并确保团队中的每个人都对它感到适应。在你尝试 Hooks之后，请随时向我们发送反馈，无论是积极的还是消极的。

我们打算让 Hooks 涵盖所有的现有的类用例，但我们将在可预见的未来继续支持类组件。 在Facebook，我们有数万个组件都是使用类编写的，我们绝对没有计划重写它们。相反，我们开始在新代码中使用 Hooks 与类并排使用。

Frequently Asked Questions

我们准备了一个 Hooks FAQ 页面，它回答了关于 Hooks 最常见的问题

Next Steps

在本文末尾，你应该大致了解 Hooks 正在解决的问题，但可能很多细节都不清楚。别担心！让我们进入下一页， 通过示例开始学习 Hooks。