React 16.8 版本: 帶 Hooks 的版本

時間 2019-11-05

標籤 react 16.8 版本 hooks 欄目 React 简体版

原文原文鏈接

原文做者：Dan Abramovhtml

譯者：UC 國際研發 Jothy前端

寫在最前：歡迎你來到「UC國際技術」公衆號，咱們將爲你們提供與客戶端、服務端、算法、測試、數據、前端等相關的高質量技術文章，不限於原創與翻譯。react

隨着 React 發佈 16.8 版本，React Hooks 也發佈穩定版本啦！
git

什麼是 Hooks?

Hooks 容許你在不編寫 class 的狀況下使用狀態(state)和其餘 React 特性。你還能夠構建本身的 Hooks, 跨組件共享可重用的有狀態邏輯。程序員

若是你之前從未據說過 Hooks, 你可能會以爲這些資源頗有趣：github

Hooks 介紹解釋了咱們給 React 添加 Hooks 的緣由。
Hooks 概覽是對內置 Hooks 的快速概述。
構建本身的 Hooks 演示瞭如何使用自定義 Hooks 重用代碼。
理解 React Hooks 探索了那些被 Hooks 解鎖的新的可能。
useHooks.com 展現了由社區維護的 Hooks 用法和 demos.

你沒必要如今就學習 Hooks. Hooks 沒有重大變化，咱們不計劃從 React 中移除 class. Hooks FAQ 描述了咱們逐步採納的策略。
算法

無重大重寫

咱們不建議你爲了立刻應用 Hooks 而重寫現有應用。相反，咱們建議你嘗試在一些新的組件中使用 Hooks, 而且讓咱們瞭解你的想法。使用 Hooks 的代碼將與使用 class 的現有代碼並行工做。
npm

我如今能夠用 Hooks 了嗎？

能夠的! 從 16.8.0 版本開始，React 包含一個穩定的 React Hooks 實現，可用於：react-native

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, React 最新的 Flow 和 TypeScript 定義也支持它們。咱們強烈建議你啓用名爲 eslint-plugin-react-hooks 的新 lint 規則來強制執行 Hooks 的最佳實踐。Create React App 將很快包含它。

規劃

咱們在最近發佈的 React 路線圖中描述了咱們將來幾個月的計劃。

請注意，React Hooks 還沒有涵蓋全部 class 的用例，但已經很接近了。目前，只有 getSnapshotBeforeUpdate() 和 componentDidCatch() 方法沒有等價的 Hooks API, 且這些生命週期相對不常見。若是你想用 Hooks, 你能夠在你正在寫的大部分新代碼中使用它。

即便仍處於 alpha 狀態，React 社區也使用 Hooks 爲動畫(animations)，表單(forms)，訂閱(subscriptions)，與其餘庫的集成(integrating)等建立了許多有趣的示例和用法。咱們爲 Hooks 而雀躍，由於它們使代碼更易重用，幫助你以更簡單的方式編寫組件，建立絕佳的用戶體驗。咱們火燒眉毛想知道你接下來會創造什麼！

測試 Hooks

咱們在這個版本中添加了一個名爲 ReactTestUtils.act() 的新 API. 它可確保測試的行爲與瀏覽器中的行爲更加匹配。咱們建議將全部代碼渲染和組件更新觸發封裝到 act() 調用中。測試庫也能夠用它封裝 API（舉個例子，react-testing-library 的 render 和 fireEvent 工具就是這樣作的）。

例如，此頁面中的計數器示例能夠這樣進行測試：

對 act() 的調用也會刷新它們內部的 effects.

若是你須要測試自定義 Hook, 你能夠在測試時建立組件，並使用它的 Hook. 而後就能夠測試你寫的組件了。

爲了減小重複樣板，咱們建議使用 react-testing-library, 它鼓勵程序員編寫模擬用戶使用組件的行爲的測試。

致謝

咱們想向全部在 Hooks RFC 中分享反饋意見的人致謝。咱們已經閱讀了大家的全部評論，並根據它們對最終 API 進行了一些調整。

安裝

React {#react}

React 16.8.0 版本已發佈到 NPM 註冊表。

使用 Yarn 安裝 React 16, 請運行：

使用 NPM 安裝 React 16, 請運行：

咱們還經過 CDN 提供 React 的 UMD 構建版本：

詳情請訪問詳細的安裝。

React Hooks 的 ESLint 插件

注意
綜上所述，咱們強烈建議你使用 eslint-plugin-react-hooks lint 規則。

若是你正在使用 Create React App, 而不是手動配置 ESLint，你能夠等待下一版本的 react-scripts, 屆時將包含此規則。

假設你已經安裝了 ESLint, 請運行：

而後添加如下 ESLint 配置：

更新日誌

React {#react-1}

新增 Hooks —— 一種在不編寫 class 的狀況下使用狀態(state)和其餘 React 特性的方法。(@acdlite 等人提出於 #13968)
改進 useReducer Hook 延遲初始化 API. (@acdlite 提出於 #14723）

React DOM {#react-dom}

避免爲 useState 和 useReducer Hooks 傳入相同值時進行的渲染。 (@acdlite 提出於 #14569)
不比較傳遞給 useEffect/useMemo/useCallback Hooks 的第一個參數。 (@gaearon 提出於 #14654)
使用 Object.is 算法比較 useState 和 useReducer 的值。 (@Jessidhia 提出於 #14752)
支持傳遞給 React.lazy() 的同步 thenable. (@gaearon 提出於 #14626)
在嚴格模式（僅限 DEV）中使用 Hooks 兩次渲染組件以匹配 class 行爲。 (@gaearon 提出於 #14654)
在開發模式中 Hook 順序不匹配時警告。 (@threepointone 提出於 #14585 及 @acdlite 提出於 #14591)
Effect 清理功能必須返回 undefined 或函數。不容許包含 null 在內的其餘全部值。(@acdlite 提出於 #14119)

React 測試渲染器

支持淺層渲染器中的 Hooks. (@trueadm 提出於 #14567)
在淺層渲染器中存在 getDerivedStateFromProps 的狀況下，修復 shouldComponentUpdate 中的錯誤狀態。 (@chenesan 提出於 #14613)
添加 ReactTestRenderer.act() 和 ReactTestUtils.act() 以進行批處理更新，以便測試更接近真實行爲。 (@threepointone 提出於 #14744)

ESLint 插件: React Hooks {#eslint-plugin-react-hooks}

首次發佈。 (@calebmer 提出於 #13968)
修復循環後的報告。 (@calebmer 及 @Yurickh 提出於 #14661)
不要把錯誤的拋出看成違反規則。 (@sophiebits 提出於 #14040)

Hooks 自 Alpha 版本以後的更新日誌 {#hooks-changelog-since-alpha-versions}

上述更改日誌包含自上次穩定版本(16.7.0)以來的全部重要更改。與咱們的全部 minor 版本同樣，這些更改都不會破壞向後兼容性。

若是你正在使用來自 React alpha 版本的 Hooks, 請注意此版本確實包含對 Hooks 的一些小的重大更改。 咱們不建議在生產代碼中依賴 alpha. 咱們發佈它們是爲了在 API 穩定以前根據的社區反饋進行更改。

如下是自第一個 alpha 版本發佈以來，咱們對 Hooks 所作的全部重大更改：

刪除 `useMutationEffect`. (@sophiebits 提出於 #14336)
將 useImperativeMethods 重命名爲 `useImperativeHandle`. (@threepointone 提出於 #14565)
避免爲 useState 和 useReducer Hooks 傳入相同值時進行的渲染。 (@acdlite 提出於 #14569)
不比較傳遞給 useEffect/useMemo/useCallback Hooks 的第一個參數。 (@gaearon 提出於 #14654)
使用 Object.is 算法比較 useState 和 useReducer 的值。 (@Jessidhia 提出於 #14752)
在嚴格模式下僅使用 Hooks 兩次渲染組件（僅限 DEV）。 (@gaearon 提出於 #14654)
改進 useReducer Hook 延遲初始化 API. (@acdlite 提出於 #14723）