[譯] React v16.8： 含有Hooks的版本

原文出處： React v16.8: The One With Hooks
February 06, 2019 by Dan Abramov

伴隨 React 16.8，React Hooks能夠在穩定版本中使用！

---

什麼是 Hooks?

Hooks 可讓咱們不用寫一個 class 就能使用 state 和其餘的 React 特性。咱們也能夠構建咱們本身的 Hooks 來在組件之間共享可重複使用的有狀態邏輯。
若是您以前從未據說 Hooks，您可能對下列這些資源感興趣：

• Hooks 介紹解釋了咱們向 React 添加 Hooks 的緣由。
• Hooks 概覽 是一個對內置 Hookks 的快速概覽。
• 構建本身的 Hooks演示了使用自定義 Hooks 來複用代碼。
• 理解 React Hooks探索了經過解鎖 Hooks 帶來的新的可能。
• useHooks.com展現了社區維護的 Hooks 指導手冊和演示示例。

您如今不必必定要學習 Hooks 。 Hooks 並無突破性的改變，並且咱們也沒有打算 React 中移除 class。這篇Hooks FAQ描述了逐步採用的策略。
_

無需大規模重寫

咱們不推薦重寫您已經存在的應用，以便一晚上之間就使用上 Hooks。相反，咱們更建議您嘗試在一些新的組件中使用 Hooks，而且請讓咱們瞭解到您的使用感覺。使用 Hooks 的代碼會與現存使用 class 的代碼並肩在一塊兒工做。

如今可使用 Hooks 了嗎？

固然！從 16.8.0 開始，React 包含了 React Hooks 的穩定實現來用於：

• React DOM
• React DOM Server
• React Test Renderer
• React Shallow Renderer

請注意，要啓用 Hooks，全部的 React 包均須要升級到 16.8.0 或者更高版本。 若是忘記升級，不能使用 Hooks，好比 React DOM。

React Native 將會在 0.59 發佈版本中獲得支持。
_

工具支持

React DevTools 目前支持 React Hooks。在最新的 Flow 和 TypeScript 對 React 的定義中也一樣支持。咱們強烈建議使用一條名爲 eslint-plugin-react-hooks 的新檢查規則，來強制實現 Hooks 的最佳實踐。很快它也會默認包含進 Create React App 中。
_

下一步呢？

咱們已經在最近發佈的 React Roadmap 中，描述了咱們接下來幾個月的計劃。

請注意 React Hooks 尚未涵蓋 class 的全部用例，可是差很少了快完成了。

目前，只有 getSnapshotBeforeUpdate() 和 componentDidCatch() 這倆方法沒有相對應的 Hooks API，並且它們的生命週期相對來講比較特殊少見。若是您須要，您應該能夠在您寫的大多數新代碼中使用 Hooks。

儘管 Hooks 還處於初步階段，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(() => {
  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');
});

若是打算測試自定義的 Hooks，能夠經過在測試中建立一個組件並使用它的 Hook 來實現，而後您就能夠測試您寫的 Hooks 了。

爲了減小樣板，建議使用 react-testing-library 來進行測試，該庫是爲鼓勵編寫測試用例而設計的。
_

感謝

感謝全部在 Hooks RFC 中進行評論來分享本身的反饋信息的同窗。咱們已經閱讀了大家的全部評論意見，並在其基礎上爲最終的 API 作了些許調整。
_

安裝

React

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 提供React 的 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>

有關詳細安裝說明，請參閱文檔。

用於 React Hooks 的 ESLint 插件

注意：
如上所述，強烈建議您使用 eslint-plugin-react-hooks 規則。
若是正在使用 Create React App，而不是手動配置 ESLint，建議等待下一個版本的 react-scripts，即將發佈而且會包含這條規則。

假定您已經安裝過了 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"
  }
}