译者｜React 非官方网志

翻译者｜邪见

React 16.8 总算增添了Fedora的 Hooks。

甚么是 hooks？

hooks 能阳光普照不撰写类的情况下选用 state 和 React 的其它机能。你还可以构筑他们的 hooks，在模块间共享天然资源可宠信的有状况方法论。

假如你以后未曾听闻过 hooks，能参照下列那些天然资源：

“Introducing hookss”说明了他们为 React 加进 hooks 机能：https://reactjs.org/docs/hookss-intro.html“hookss at a Glance”对内建的 hooks 展开了加速的如是说：https://reactjs.org/docs/hookss-overview.html“Building Your Own hookss ”模拟了怎样选用自订 hooks 宠信标识符：https://reactjs.org/docs/hookss-custom.html“Making Sense of React hookss”深入探讨了 hooks 增添的捷伊几率：https://medium.com/@dan_abramov/making-sense-of-react-hookss-fdbde8803889usehookss.com 列举了由街道社区保护的 hooks 课堂教学和模拟实例。

你不一定要那时自学 hooks，它并没增添关键性变动，他们也没方案从 React 中去除类。hooks 的 FAQ（

https://reactjs.org/docs/hookss-faq.html）谈及了 hooks 的逐渐选用思路。

千万别展开关键性改写

他们不提议你为的是能立刻选用 hooks 而对原有插件展开关键性改写。恰好相反，能在许多新模块中试著选用 hooks，并让他们晓得你的设想。选用 hooks 的标识符依然能与选用类的现有标识符共存。

从今天起就能选用 hooks 了吗？

是的！从 16.8.0 开始，React 包含了Fedora本的 React hooks 实现：

React DOMReact DOM ServerReact Test RendererReact Shallow Renderer

请注意，要选用 hooks，所有 React 包都需要升级到 16.8.0 或更高版本。假如你忘记更新某个包（例如 React DOM），hooks 将无法工作。

React Native 将在 0.59 版本中支持 hooks。

工具支持

React DevTools 那时支持 React hooks，最新 Flow 和 TypeScript 定义也支持它们。提议启用一个叫作

eslint-plugin-react-hookss（

https://www.npmjs.com/package/eslint-plugin-react-hookss）的 lint 规则来强制执行 hooks 的最佳课堂教学，它很快会被包含在 Create React App 中。

下一步

他们在最近正式发布的 React 路线图（

https://reactjs.org/blog/2018/11/27/react-16-roadmap.html）中描述了未来几个月的方案。

请注意，React hooks 还没涵盖类的所有用例，但已经非常接近了。目前，只有 getSnapshotBeforeUpdate() 和 componentDidCatch() 方法没等效的 hooks API，而且那些生命周期方法相对不那么常见。假如你愿意，应该能在大部分新标识符中选用 hooks。

在 hooks 还处于 alpha 状况的时候，React 街道社区就已经选用 hooks 为动画、表单、订阅、与其它库集成等创建了很多有趣的实例。他们也感到很兴奋，因为 hooks 让标识符宠信变得更加容易，能帮助你以更简单的方式开发模块并为用户增添更出色的用户体验。

测试 hooks

他们在这个版本中加进了一个叫作 ReactTestUtils.act() 的 API，它能确保测试中的行为与在浏览器中的行为更加接近。他们提议将渲染和触发模块更捷伊标识符包装到 act() 调用中。测试库也能用它来包装它们的 API（例如，react-testing-library 的 render 和 fireEvent 就是这样做的）。

例如，这个页面（

https://reactjs.org/docs/hookss-effect.html）中的计数器实例能像这样测试： 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); });

对 act() 的调用也会刷新它们内部的状况。

假如你需要测试自订 hooks，能在测试中创建一个模块，并在这个模块上选用 hooks，然后就能测试你的模块。

为的是减少样板标识符，他们提议选用 react-testing-library（

https://git.io/react-testing-library），你能像最终用户选用模块那样对模块展开测试。

安装

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 提供了 UMD 版本：

更详细的安装说明请参阅非官方文档：

https://reactjs.org/docs/installation.html

注意：如上所述，他们强烈提议选用 eslint-plugin-react-hookss lint 规则。假如你正在选用 Create React App，能等待下一版本 react-scripts 正式发布，它将包含这个规则，而不是手动去配置 ESLint。

假设你已经安装了 ESLint，请运行：

# npm npm install eslint-plugin-react-hookss@next –save-dev # yarn yarn add eslint-plugin-react-hookss@next –dev

然后将其加进到 ESLint 配置中：

{ “plugins”: [ // … “react-hookss” ], “rules”: { // … “react-hookss/rules-of-hookss”: “error” } }

更新日志

React

新增了 hooks——一种在不撰写类的情况下选用 state 和 React 其它机能的方法。改进了 useReducer hooks 延迟初始化 API。

React DOM

在选用 useState 和 useReducer hooks 时，假如值相同则退出渲染。不比较传给 useEffect/useMemo/useCallback hookss 的第一个参数。选用 Object.is 算法比较 useState 和 useReducer 的值。支持传给 React.lazy() 的同步 thenable。在严格模式（仅限 DEV）中选用 hooks 两次渲染模块以便与类的行为相匹配。在开发中对 hooks 顺序不匹配提出警告。状况清理函数必须返回 undefined 或另一个函数，不允许包括 null 在内的其它值。

React Test Renderer

支持在浅渲染器中选用 hooks。在 getDerivedStateFromProps 存在的情况下修复 shouldComponentUpdate 中的错误状况。加进 ReactTestRenderer.act() 和 ReactTestUtils.act() 以展开批量更新，这样就能测试更接近真实的行为。

ESLint 插件：React hookss

初始正式发布。修复循环错误。不将抛出异常视为违反规则。

英文原文：

https://reactjs.org/blog/2019/02/06/react-v16.8.0.html?from=timeline&isappinstalled=0