[译] React v16.8： 含有Hook的版本

原文出处：React v16.8: The One With Hooks February 06, 2019 by Dan Abramov

伴随 React 16.8，React Hook能够在稳定版本中使用！

---

什么是 Hook?

Hook 可让咱们不用写一个 class 就能使用 state 和其余的 React 特性。咱们也能够构建咱们本身的 Hook 来在组件之间共享可重复使用的有状态逻辑。 若是您以前从未据说 Hooks，您可能对下列这些资源感兴趣：

• Hook 介绍解释了咱们向 React 添加 Hook 的缘由。
• Hook 概览 是一个对内置 Hook 的快速概览。
• 构建本身的 Hook演示了使用自定义 Hook 来复用代码。
• 理解 React Hook探索了经过解锁 Hook 带来的新的可能。
• useHooks.com展现了社区维护的 Hook 指导手册和演示示例。

您如今不必必定要学习 Hook 。 Hook 并无突破性的改变，并且咱们也没有打算 React 中移除 class。这篇Hook FAQ描述了逐步采用的策略。

---

无需大规模重写

咱们不推荐重写您已经存在的应用，以便一晚上之间就使用上 Hooks。相反，咱们更建议您尝试在一些新的组件中使用 Hooks，而且请让咱们了解到您的使用感觉。使用 Hook 的代码会与现存使用 class 的代码并肩在一块儿工做。

如今可使用 Hook 了吗？

固然！从 16.8.0 开始，React 包含了 React Hook 的稳定实现来用于：

• React DOM
• React DOM Server
• React Test Renderer
• React Shallow Renderer 请注意，要启用 Hooks，全部的 React 包均须要升级到 16.8.0 或者更高版本。 若是忘记升级，不能使用 Hooks，好比 React DOM。

React Native 将会在 0.59 发布版本中获得支持。

---

工具支持

React DevTools 目前支持 React Hooks。在最新的 Flow 和 TypeScript 对 React 的定义中也一样支持。咱们强烈建议使用一条名为 eslint-plugin-react-hooks 的新检查规则，来强制实现 Hook 的最佳实践。很快它也会默认包含进 Create React App 中。

---

下一步呢？

咱们已经在最近发布的 React Roadmap 中，描述了咱们接下来几个月的计划。

请注意 React Hook 尚未涵盖 class 的全部用例，可是差很少了快完成了。

目前，只有 getSnapshotBeforeUpdate() 和 componentDidCatch() 这俩方法没有相对应的 Hook API，并且它们的生命周期相对来讲比较特殊少见。若是您须要，您应该能够在您写的大多数新代码中使用 Hooks。

尽管 Hook 还处于初步阶段，React 社区已经使用 Hook 为动画、表单、订阅、与其余库集成等方面，创做了不少有意思的示例和指南手册。Hooks 使得代码复用更加简单，帮助咱们用更加简洁的方式写出组件，以提供更好的用户体验，这让咱们感到很兴奋。咱们等不及要看到您下一次的创做！

---

测试 Hook

咱们在发布版中添加了一个名为 ReactTestUtils.act() 的新 API。它能够确保测试中的行为与浏览器中的行为更紧密地匹配。咱们建议将任何渲染和触发组件更新的代码包装进 act() 调用。测试库也能够用它包装它们的API（例如，react-testing-library 的 render 和 fireEvent 实用工具就是这样作的）。

例如，此页面的计数器能够像这样进行测试：

import React from 'react';
import ReactDOM from 'react-dom';
import { act } from 'react-dom/test-utils';
import Counter from './Counter';

let container;

beforeEach(() => {
  container = document.createElement('div');
  document.body.appendChild(container);
});

afterEach(() => {
  document.body.removeChild(container);
  container = null;
});

it('can render and update a counter', () => {
  // Test first render and effect
  act(() => {
    ReactDOM.render(<Counter />, container); }); const button = container.querySelector('button'); const label = container.querySelector('p'); expect(label.textContent).toBe('You clicked 0 times'); expect(document.title).toBe('You clicked 0 times'); // Test second render and effect act(() => { button.dispatchEvent(new MouseEvent('click', {bubbles: true})); }); expect(label.textContent).toBe('You clicked 1 times'); expect(document.title).toBe('You clicked 1 times'); }); 复制代码

若是打算测试自定义的 Hooks，能够经过在测试中建立一个组件并使用它的 Hook 来实现，而后您就能够测试您写的 Hook 了。

为了减小样板，建议使用 react-testing-library 来进行测试，该库是为鼓励编写测试用例而设计的。

---

感谢

感谢全部在 Hook RFC 中进行评论来分享本身的反馈信息的同窗。咱们已经阅读了大家的全部评论意见，并在其基础上为最终的 API 作了些许调整。

---

安装

React

React v16.8.0 在 npm 上已可使用。

使用 Yarn 来安装 React 16，运行命令：

yarn add react@^16.8.0 react-dom@^16.8.0
复制代码

使用 npm 来安装 React 16，运行命令：

npm install --save react@^16.8.0 react-dom@^16.8.0
复制代码

同时也经过 CDN 提供React 的 UMD 构建版本：

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
复制代码

有关详细安装说明，请参阅文档。

用于 React Hook 的 ESLint 插件

注意： 如上所述，强烈建议您使用eslint-plugin-react-hooks 规则。 若是正在使用 Create React App，而不是手动配置 ESLint，建议等待下一个版本的 react-scripts，即将发布而且会包含这条规则。

假定您已经安装过了 ESLint，运行命令：

# npm
npm install eslint-plugin-react-hooks@next --save-dev

# yarn
yarn add eslint-plugin-react-hooks@next --dev
复制代码

而后，添加下面的内容到 ESLint 配置中：

{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error"
  }
}
复制代码