React 16.8 版本: 帶 Hooks 的版本

Jothy發表於2019-02-18
ReactHook

原文作者：Dan Abramov

譯者：UC 國際研發 Jothy

寫在最前：歡迎你來到“UC國際技術”公眾號，我們將為大家提供與客戶端、服務端、演算法、測試、資料、前端等相關的高質量技術文章，不限於原創與翻譯。

隨著 React 釋出 16.8 版本，React Hooks 也釋出穩定版本啦！


什麼是 Hooks?

Hooks 允許你在不編寫 class 的情況下使用狀態(state)和其他 React 特性。 你還可以構建自己的 Hooks, 跨元件共享可重用的有狀態邏輯。

如果你以前從未聽說過 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 或更高版本。 如果你忘記更新諸如 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 工具就是這樣做的）。


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

React 16.8 版本: 帶 Hooks 的版本

對 act() 的呼叫也會重新整理它們內部的 effects.

如果你需要測試自定義 Hook, 你可以在測試時建立元件，並使用它的 Hook. 然後就可以測試你寫的元件了。

為了減少重複樣板，我們建議使用 react-testing-library, 它鼓勵程式設計師編寫模擬使用者使用元件的行為的測試。


致謝

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


安裝

React {#react}

React 16.8.0 版本已釋出到 NPM 登錄檔。


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

React 16.8 版本: 帶 Hooks 的版本​

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

React 16.8 版本: 帶 Hooks 的版本


我們還通過 CDN 提供 React 的 UMD 構建版本：

React 16.8 版本: 帶 Hooks 的版本

​

詳情請訪問詳細的安裝。


React Hooks 的 ESLint 外掛

注意

綜上所述，我們強烈建議你使用 eslint-plugin-react-hooks lint 規則。
如果你正在使用 Create React App, 而不是手動配置 ESLint，你可以等待下一版本的 react-scripts, 屆時將包含此規則。


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

React 16.8 版本: 帶 Hooks 的版本


然後新增以下 ESLint 配置：

​React 16.8 版本: 帶 Hooks 的版本


更新日誌

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}


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）


好文推薦：

Facebook 對前端工程師的要求是啥？一起來看看


中英文原文：

React v16.8: The One With Hooks


“UC國際技術”致力於與你共享高質量的技術文章

歡迎關注我們的公眾號、將文章分享給你的好友

React 16.8 版本: 帶 Hooks 的版本


相關文章