原文出处： React v16.8: The One With Hooks
February 06, 2019 by Dan Abramov
伴随 React 16.8，React Hooks可以在稳定版本中使用！
什么是 Hooks?
Hooks 可以让我们不用写一个 class 就能使用 state 和其他的 React 特性。我们也可以构建我们自己的 Hooks 来在组件之间共享可重复使用的有状态逻辑。
如果您之前从未听说 Hooks，您可能对下列这些资源感兴趣：
- Hooks 介绍解释了我们向 React 添加 Hooks 的原因。
- Hooks 概览 是一个对内置 Hookks 的快速概览。
- 构建自己的 Hooks演示了使用自定义 Hooks 来复用代码。
- 理解 React Hooks探索了通过解锁 Hooks 带来的新的可能。
- useHooks.com展示了社区维护的 Hooks 指导手册和演示示例。
您现在没必要一定要学习 Hooks 。 Hooks 并没有突破性的改变，而且我们也没有打算 React 中移除 class。这篇Hooks FAQ描述了逐步采用的策略。
_
无需大规模重写
我们不推荐重写您已经存在的应用，以便一夜之间就使用上 Hooks。相反，我们更建议您尝试在一些新的组件中使用 Hooks，并且请让我们了解到您的使用感受。使用 Hooks 的代码会与现存使用 class 的代码并肩在一起工作。
现在可以使用 Hooks 了吗？
当然！从 16.8.0 开始，React 包含了 React Hooks 的稳定实现来用于：
- 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 的新检查规则，来强制实现 Hooks 的最佳实践。很快它也会默认包含进 Create React App 中。
_
下一步呢？
我们已经在最近发布的 React Roadmap 中，描述了我们接下来几个月的计划。
请注意 React Hooks 还没有涵盖 class 的所有用例，但是差不多了快完成了。
目前，只有 getSnapshotBeforeUpdate() 和 componentDidCatch() 这俩方法没有相对应的 Hooks API，而且它们的生命周期相对来说比较特殊少见。如果您需要，您应该可以在您写的大多数新代码中使用 Hooks。
尽管 Hooks 还处于初步阶段，React 社区已经使用 Hooks 为动画、表单、订阅、与其他库集成等方面，创作了很多有意思的示例和指南手册。Hooks 使得代码复用更加简单，帮助我们用更加简洁的方式写出组件，以提供更好的用户体验，这让我们感到很兴奋。我们等不及要看到您下一次的创作！
_
测试 Hooks
我们在发布版中添加了一个名为 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 来实现，然后您就可以测试您写的 Hooks 了。
为了减少样板，建议使用 react-testing-library 来进行测试，该库是为鼓励编写测试用例而设计的。
_
感谢
感谢所有在 Hooks 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 Hooks 的 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"
}
}