React 16.8發佈了

React 16.8 終於帶來了穩定版的 Hooks。

什麼是 hooks？

hooks 可以讓你在不編寫類的情況下使用 state 和 React 的其他功能。你還可以構建自己的 hooks，在組件之間共享可重用的有狀態邏輯。

如果你之前從未聽說過 hooks，可以參考以下這些資源：

• “Introducing hooks”解釋了我們爲 React 添加 hooks 功能：
• https://reactjs.org/docs/hooks-intro.html
• “hooks at a Glance”對內置的 hooks 進行了快速的介紹：
• https://reactjs.org/docs/hooks-overview.html
• “Building Your Own hooks ”演示瞭如何使用自定義 hooks 重用代碼：
• https://reactjs.org/docs/hooks-custom.html
• “Making Sense of React hooks”探討了 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 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

• 新增了 hooks——一種在不編寫類的情況下使用 state 和 React 其他功能的方法。
• 改進了 useReducer hooks 延遲初始化 API。

React DOM

• 在使用 useState 和 useReducer hooks 時，如果值相同則退出渲染。
• 不比較傳給 useEffect/useMemo/useCallback hooks 的第一個參數。
• 使用 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

• 初始發佈。
• 修復循環錯誤。
• 不將拋出異常視爲違反規則。

轉自：React 官方博客
鏈接：https://reactjs.org/blog/2019/02/06/react-v16.8.0.html?from=timeline&isappinstalled=0

關注公衆號【grain先森】，回覆關鍵詞 【18福利】，獲取爲你準備的年終福利，更多關鍵詞玩法期待你的探索~