标签：containe def content 策略 arc 注意 callback reducer hot
React 16.8发布：hooks终于来了！
图片
作者｜React 官方博客
译者｜无明
React 16.8 终于带来了稳定版的 Hooks。
什么是 hooks？
hooks 可以让你在不编写类的情况下使用 state 和 React 的其他功能。你还可以构建自己的 hooks，在组件之间共享可重用的有状态逻辑。
如果你之前从未听说过 hooks，可以参考以下这些资源：
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-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
标签：containe def content 策略 arc 注意 callback reducer hot
原文地址：https://blog.51cto.com/15057848/2567773
