React 16.8发布：hooks终于来了！

Posted 2021-04-26 前端之巅

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React 16.8发布：hooks终于来了！相关的知识，希望对你有一定的参考价值。

作者｜React 官方博客

译者｜无明

React 16.8 终于带来了稳定版的 Hooks。

什么是 hooks？

hooks 可以让你在不编写类的情况下使用 state 和 React 的其他功能。你还可以构建自己的 hooks，在组件之间共享可重用的有状态逻辑。

如果你之前从未听说过 hooks，可以参考以下这些资源：

“Introducing hookss”解释了我们为 React 添加 hooks 功能：
https://reactjs.org/docs/hooks-intro.html
“hookss at a Glance”对内置的 hooks 进行了快速的介绍：
https://reactjs.org/docs/hooks-overview.html
“Building Your Own hookss ”演示了如何使用自定义 hooks 重用代码：
https://reactjs.org/docs/hooks-custom.html
“Making Sense of React hookss”探讨了 hooks 带来的新的可能性：
https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889
usehooks.com 列出了由社区维护的 hooks 实践和演示示例。

你不一定要现在学习 hooks，它并没有带来重大变化，我们也没有计划从 React 中移除类。hooks 的 FAQ（https://reactjs.org/docs/hooks-faq.html）谈到了 hooks 的逐步采用策略。

不要进行重大重写

我们不建议你为了能够马上采用 hooks 而对现有应用程序进行重大重写。相反，可以在一些新组件中尝试使用 hooks，并让我们知道你的想法。使用 hooks 的代码仍然可以与使用类的现有代码并存。

从今天起就可以使用 hooks 了吗？

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

React DOM
React DOM Server
React Test Renderer
React Shallow Renderer

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

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

工具支持

React DevTools 现在支持 React hooks，最新 Flow 和 TypeScript 定义也支持它们。建议启用一个叫作 eslint-plugin-react-hooks（https://www.npmjs.com/package/eslint-plugin-react-hooks）的 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/hooks-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 版本：

<script crossorigin ></script>
<script crossorigin ></script>

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

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 hooks

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

英文原文：

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