React 16.8发布：hooks终于来了！

最新推荐文章于 2023-12-27 00:00:00 发布

糖糖糖糖糖糖糖糖糖糖糖糖糖糖糖糖糖糖

最新推荐文章于 2023-12-27 00:00:00 发布

阅读量569

点赞数

本文链接：https://blog.csdn.net/cpongo4/article/details/89148658

版权

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

什么是hooks？

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

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

“Introducing hooks”解释了我们为React添加hooks功能；
“hooks at a Glance”是对内置的hooks进行了快速的介绍；
“Building Your Own hooks ”演示了如何使用自定义hooks重用代码；
“Making Sense of React hooks”探讨了hooks带来的新的可能性；
usehooks.com列出了由社区维护的hooks实践和演示示例。

你不一定要现在学习hooks，它并没有带来重大变化，我们也没有计划从React中移除类。hooks的FAQ谈到了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的lint规则来强制执行hooks的最佳实践，它很快会被包含在Create React App中。

下一步

我们在最近发布的React路线图中描述了未来几个月的计划。

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

在hooks还处于alpha状态的时候，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(() =\u0026gt; {  container = document.createElement('div');  document.body.appendChild(container);});afterEach(() =\u0026gt; {  document.body.removeChild(container);  container = null;});it('can render and update a counter', () =\u0026gt; {  // Test first render and effect  act(() =\u0026gt; {    ReactDOM.render(\u0026lt;Counter /\u0026gt;, 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(() =\u0026gt; {    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，你可以像最终用户使用组件那样对组件进行测试。

安装

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版本：

\u0026lt;script crossorigin src=\u0026quot;https://unpkg.com/react@16/umd/react.production.min.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt;\u0026lt;script crossorigin src=\u0026quot;https://unpkg.com/react-dom@16/umd/react-dom.production.min.js\u0026quot;\u0026gt;\u0026lt;/script\u0026gt;

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

用于React hooks的ESLint插件

注意：

如上所述，我们强烈建议使用eslint-plugin-react-hooks lint规则。

如果你正在使用Create React App，可以等待下一版本react-scripts发布，它将包含这个规则，而不是手动去配置ESLint。

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

# npmnpm install eslint-plugin-react-hooks@next --save-dev# yarnyarn add eslint-plugin-react-hooks@next --dev

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

{  \u0026quot;plugins\u0026quot;: [    // ...    \u0026quot;react-hooks\u0026quot;  ],  \u0026quot;rules\u0026quot;: {    // ...    \u0026quot;react-hooks/rules-of-hooks\u0026quot;: \u0026quot;error\u0026quot;  }}