[译] React Hook 介绍 — React 系列教程 Part 1

• 原文地址：Introducing Hooks
• 原文做者：reactjs.org
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：Sam
• 校对者：Raoul1996

Hook 介绍

Hook 是一项新的功能提案，可让你在不编写类的状况下使用状态（state）和其余 React 功能。它们目前处于 React v16.7.0-alpha 阶段，而且在开放式 RFC 中进行着讨论。

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。在本页面上，咱们将继续解释为何咱们要将 Hook 添加到 React 中，以及它们如何帮助你编写出色的应用。

没有重大的变化

在咱们继续以前，请注意 Hook 是：

• 彻底可选择引入。 你无需重写任何现有代码，就能在一些组件里尝试使用 Hook。但若是你不想，你没必要如今学习或使用 Hook。
• 100% 向后兼容。 Hook 不包含任何重大的更改。
• 如今可用。 Hook 目前处于 alpha 版本，咱们但愿在收到社区反馈后把它们包含在 React 16.7 中。

没有把类从 React 中移除的计划。 你能够在本页面底部阅读更多关于渐进式采用 Hook 的策略信息。

Hook 不会取代你对 React 概念的理解。 相反地，Hook 为你已知的 React 概念（props、state、context、refs 和 lifecycle）提供了更直接的 API。而且稍后咱们还将演示，Hook 还提供了一种组合它们新的强大的方式。

若是你只是想开始学习 Hook，请随意直接跳到下一页！ 你也能够继续阅读本页，详细了解咱们为何要添加 Hook，以及咱们是如何在不重写应用程序的状况下开始使用它们的。

动机

Hook 解决了咱们在过去五年时间里编写和维护数以万计 React 组件时遇到的各类看似不相关的问题。不管你是在学习 React，仍是平常使用，甚至说是喜欢使用具备相似组件模型的其余库，你都有可能注意到这些问题。

在组件之间重用带状态逻辑很困难

React 没有提供把可重用行为“附加”到组件上的方法（例如，把它关联到 store 里）。若是你已经使用了 React 一段时间，你可能会熟练使用渲染属性和高阶组件的模式尝试解决这个问题。但这些模式须要你在使用它们的时候对组件进行重构，这可能会很麻烦而且使代码更难以跟踪。若是你看一下 React DevTools 里的典型 React 应用程序，你也许会发现一个由提供者、消费者、高阶组件、渲染属性和其余抽象层包裹起来的“包装地狱”组件。虽然咱们能够在 React DevTools 中过滤它们，但这里引出了一个更深层次的基本问题：React 须要一个更好的分享带状态逻辑的原语。

使用 Hook，你能够从一个组件中导出带状态逻辑，以便它能够单独测试和复用。Hook 容许你在不改变组件层次结构的状况下复用带状态逻辑。 这样就能够轻松地在多个组件之间或者社区里共享 Hook。

咱们将在编写自定义钩子里进行更多的讨论。

复杂的组件变得难以理解

咱们常常不得不维护从简单开始，但后来变成混杂着带状态逻辑和反作用没法管理的组件。每一个生命周期方法一般都包含了一堆不相关的逻辑。例如，组件也许要在 componentDidMount 和 componentDidUpdate 方法里请求数据。可是，一样是在 componentDidMount 方法，可能会包含不相关的设置事件监听的逻辑，还得在 componentWillUnmount 里清除。本该一块儿更改的相关联代码被拆分，而彻底不相关的代码却最终组合到一个方法里。这就太容易引入 bug 和致使不一致了。

不少状况下不可能把这些组件拆分得更小，由于处处都有带状态的逻辑。并且测试它们也很困难。这就是许多人更喜欢将 React 与单独的状态管理库相结合的缘由之一。可是，这一般会引入太多的抽象(概念)，使得你在不一样的文件之间跳转，同时让重用组件变得更加困难。

为了解决这个问题，Hook 容许你基于相关联的部分(例如设置订阅或获取数据)把一个组件拆分红较小的函数，而不是基于生命周期函数强制拆分。你还能够选择使用 reducer 管理组件的本地状态，以使其更具可预测性。

咱们将在使用效果 Hook 里更多地讨论这个问题。

类（Class）混淆了人类和机器

经过咱们的观察，发现类是学习 React 最大的障碍。你必须理解 this 在 JavaScript 中是怎么工做的，大多数语言中它的工做方式有很大不一样。你必须记住绑定事件处理程序。若是没有不稳定的语法提案，代码就很是冗长。人们能够很好地理解属性，状态和自上而下的数据流，但仍然很艰难地与类做斗争。React 中的函数和类组件之间的区别以及什么时候使用哪一种组件，即便在经验丰富的 React 开发人员之间也会引起分歧。

此外，React 已经推出大概五年时间了，而且咱们但愿确保它在将来的五年里还保持相关性。就像 Svelte，Angular，Glimmer 和其余人代表的那样，提早编译组件将来有很大的潜力。特别是在它不局限于模版的状况下。目前，咱们已经使用 Prepack 作了组件折叠的实验，而且咱们已经看到了有前景的早期结果。可是，咱们发现类组件可能会引起无心识的模式使得这些优化回退到较慢的路径上。类也给今天的工具提出了问题。例如，类不能很好地压缩，而且它们使得热更新加载变得片状和不可靠。咱们但愿提供一种 API，使代码更可能的留在可优化的路径上。

为了解决这个问题，Hook 容许你在没有类的状况下使用更多 React 的功能。 概念上来讲，React 组件一直是更接近于函数的。Hook 拥抱函数，但不会牺牲掉 React 实际的精神。Hook 提供了对命令式逃生舱口的访问，而且不须要你学习复杂的函数式或反应式编程技术。

例子

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

逐步采用策略

TLDR：没有从 React 中移除类的计划

咱们知道 React 开发者专一于发布产品，没有时间研究正在发布的每一个新 API。Hook 是很新的，在考虑学习或采用它们以前等待更多的示例和教程可能会更好。

咱们也理解为 React 添加新原语的标准很是高。对于好奇的读者来讲，咱们已经事先准备了一个详细的 RFC，里面有更多深刻细节的动机，并提供有关特定设计决策的额外视角和相关领先技术。

相当重要的是，Hook 和现有代码是并行工做的，因此你能够逐步采用它们。 咱们正在分享这个实验性的 API，为了是从社区中那些有兴趣塑造 React 将来的人那里获得早期反馈 —— 而后咱们会在公开场合迭代 Hook。

最后，别急着迁移到 Hook。咱们建议避免任何“重大改写”，特别是对于现有复杂的类组件。开始“考虑 Hook”须要一点心理上的转变。根据咱们的经验，最好先在新的和非相关的组件里练习使用 Hook，并确保团队中的每一个人都对它们感到满意。在你尝试 Hook 以后，请随时给咱们发送反馈，不管是积极的仍是消极的。

咱们打算让 Hook 能覆盖全部现有的类用例，但咱们将在可预见的将来继续支持类组件。 在 Facebook，咱们有数以万计用类编写的组件，显然咱们没有要重写它们的计划。相反地，咱们开始在新的代码中并行使用 Hook 和类。

下一步

在本页的末尾，你应该大体了解 Hook 正在解决的问题，但不少细节可能还不清楚。别担忧！如今让咱们进入下一页，咱们经过示例开始学习 Hook。

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。