React 16.8发布:hooks终于来了!
React 16.8 终于带来了稳定版的 Hooks。
hooks 可以让你在不编写类的情况下使用 state 和 React 的其他功能。你还可以构建自己的 hooks,在组件之间共享可重用的有状态逻辑。
如果你之前从未听说过 hooks,可以参考以下这些资源:
你不一定要现在学习 hooks,它并没有带来重大变化,我们也没有计划从 React 中移除类。hooks 的 FAQ(https://reactjs.org/docs/hooks-faq.html)谈到了 hooks 的逐步采用策略。
我们不建议你为了能够马上采用 hooks 而对现有应用程序进行重大重写。相反,可以在一些新组件中尝试使用 hooks,并让我们知道你的想法。使用 hooks 的代码仍然可以与使用类的现有代码并存。
是的!从 16.8.0 开始,React 包含了稳定版本的 React hooks 实现:
请注意,要使用 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 让代码重用变得更加容易,可以帮助你以更简单的方式开发组件并为用户带来更出色的用户体验。
我们在这个版本中添加了一个叫作 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 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>
更详细的安装说明请参阅官方文档:https://reactjs.org/docs/installation.html
注意:如上所述,我们强烈建议使用 eslint-plugin-react-hooks lint 规则。如果你正在使用 Create React App,可以等待下一版本 react-scripts 发布,它将包含这个规则,而不是手动去配置 ESLint。
假设你已经安装了 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"
}
}
React
React DOM
React Test Renderer
ESLint 插件:React hooks
转自:React 官方博客 链接:https://reactjs.org/blog/2019/02/06/react-v16.8.0.html?from=timeline&isappinstalled=0