React 16.8發布:hooks終於來了!

2021-03-02 前端之巔
React 16.8 終於帶來了穩定版的 Hooks。

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

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

「Introducing hookss」解釋了我們為 React 添加 hooks 功能：

https://reactjs.org/docs/hooks-intro.html

「hookss at a Glance」對內置的 hooks 進行了快速的介紹：

https://reactjs.org/docs/hooks-overview.html

「Building Your Own hookss 」演示了如何使用自定義 hooks 重用代碼：

https://reactjs.org/docs/hooks-custom.html

「Making Sense of React hookss」探討了 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 的代碼仍然可以與使用類的現有代碼並存。

是的！從 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 讓代碼重用變得更加容易，可以幫助你以更簡單的方式開發組件並為用戶帶來更出色的用戶體驗。

我們在這個版本中添加了一個叫作 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-hookss lint 規則。

如果你正在使用 Create React App，可以等待下一版本 react-scripts 發布，它將包含這個規則，而不是手動去配置 ESLint。

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

# npmnpm install eslint-plugin-react-hookss@next --save-dev# yarnyarn add eslint-plugin-react-hookss@next --dev

然後將其添加到 ESLint 配置中：

{  "plugins": [    // ...    "react-hookss"  ],  "rules": {    // ...    "react-hookss/rules-of-hookss": "error"  }}

React

React DOM

在使用 useState 和 useReducer hooks 時，如果值相同則退出渲染。

不比較傳給 useEffect/useMemo/useCallback hookss 的第一個參數。

使用 Object.is 算法比較 useState 和 useReducer 的值。

支持傳給 React.lazy() 的同步 thenable。

在嚴格模式（僅限 DEV）中使用 hooks 兩次渲染組件以便與類的行為相匹配。

在開發中對 hooks 順序不匹配提出警告。

狀態清理函數必須返回 undefined 或另一個函數，不允許包括 null 在內的其他值。

React Test Renderer

ESLint 插件：React hooks

初始發布。

修復循環錯誤。

不將拋出異常視為違反規則。

英文原文：

https://reactjs.org/blog/2019/02/06/react-v16.8.0.html?from=timeline&isappinstalled=0

推薦閱讀：React將引入Hooks，你怎麼看？

移動端上軟硬體在不斷升級，移動端上越來越廣泛的使用算法，比如人臉識別、背景分割等。面對這類新趨勢，ArchSummit 全球架構師峰會將邀請正在實施的團隊技術人來介紹最新成果。

相關焦點

  • React v16.8 發布:帶來穩定版的 Hooks 功能
    React v16.8 版本已於2月6日發布，最值得關注的更新莫過於帶來了穩定版的 Hooks 功能。
  • ahooks 正式發布:值得擁抱的 React Hooks 工具庫
    要解決上面的問題，讓我們回到 React Hooks 本身，相比 Class 而言 Hooks 到底給我們帶來了哪些優勢，怎麼利用這些優勢來提升生產效率。待我細細道來 😆在 ice/hooks RFC 期間，我們也對比參考了社區的同類方案諸如 react-use 等，但最終因為 react-use 提供的 Hooks 過於冗餘
  • 你可能不知道的 React Hooks
    Hooks 來實現。/docs/hooks-reference.html[4] useEffect: https://reactjs.org/docs/hooks-reference.html#useeffect[5] Timing of Effects: https://reactjs.org/docs/hooks-reference.html#timing-of-effects[
  • 函數式編程看React Hooks(一)簡單React Hooks實現
    從 react 的變化可以看出，react 走的道路越來越接近於函數式編程，輸入輸出一致性。當然也不是憑空地去往這個方面，而是為了能夠解決更多的問題。以下 三點是 react 官網所提到的 hooks 的動機 https://zh-hans.reactjs.org/docs/hooks-intro.html#motivation代碼重用：在hooks出來之前，常見的代碼重用方式是 HOC 和render props，這兩種方式帶來的問題是：你需要解構自己的組件，同時會帶來很深的組件嵌套複雜的組件邏輯：在class組件中
  • React Hooks使用小結
    但是從掘金，知乎，博客以及面試等地方可以發現，hooks是無法避免的一個話題，好像不用hooks你就是上個世紀的人了（流下了前端卑微的淚水）  為了不當原始人，今天就來和大家一起探討下hooks大法。為什麼要用hooks？
  • 寫React Hooks前必讀
    來源：相學長 https://zhuanlan.zhihu.com/p/113216415最近團隊內有同學，由於寫react hooks引發了一些bug，甚至有1例是線上問題。團隊內也因此發起了一些爭執，到底要不要寫hooks？到底要不要加lint？到底要不要加autofix？
  • React Hooks 原理與最佳實踐
    前言React Hooks 是 React 16.8 引入的新特性，允許我們在不使用 Class 的前提下使用 state 和其他特性。React Hooks 要解決的問題是狀態共享，是繼 render-props 和 higher-order components 之後的第三種狀態邏輯復用方案，不會產生 JSX 嵌套地獄問題。2.
  • 30 分鐘精通 React 新特性——React Hooks
    如果你也對react感興趣，或者正在使用react進行項目開發，答應我，請一定抽出至少30分鐘的時間來閱讀本文好嗎？所有你需要了解的React Hooks的知識點，本文都涉及到了，相信完整讀完後你一定會有所收穫。
  • 超性感的React Hooks(四):useEffect
    許多朋友試圖利用class語法中的生命周期來類比理解useEffect，也許他們認為，hooks只是語法糖而已。那麼，即使正在使用hooks，也有可能對我上面這一段話表示不理解，甚至還會問：不類比生命周期，怎麼學習hooks？我不得不很明確的告訴大家，生命周期和useEffect是完全不同的。
  • 寫React Hooks前需要注意什麼?
    必須完整閱讀一次React Hooks官方文檔英文文檔：https://reactjs.org/docs/hooks-intro.html中文文檔：https://zh-hans.reactjs.org/docs/hooks-intro.html其中重點必看hooks: useState、useReducer、useEffect、useCallback
  • 【實戰總結篇】寫React Hooks前必讀
    「最近團隊內有同學，由於寫react hooks引發了一些bug，甚至有1例是線上問題。
  • 30 分鐘精通 React 今年最勁爆的新特性 —— React Hooks
    如果你也對react感興趣，或者正在使用react進行項目開發，答應我，請一定抽出至少30分鐘的時間來閱讀本文好嗎？所有你需要了解的React Hooks的知識點，本文都涉及到了，相信完整讀完後你一定會有所收穫。
  • React Hooks 還不如類?
    你必須遵循一些嚴格而怪異的規則：https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level需要注意代碼放置的位置，並且這裡面存在許多陷阱。我不能將一個 hook 放在一個 if 語句中，因為 hooks 的內部機制是基於調用順序的，這簡直太瘋狂了！
  • 10分鐘教你手寫8個常用的自定義hooks
    本文轉載自【微信公眾號：趣談前端，ID:beautifulFront】經微信公眾號授權轉載，如需轉載與原文作者聯繫前言Hook 是 React 16.8 的新增特性。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性。
  • React Hooks 設計思想
    在這個例子中，NewsItem 並沒有 fetch data，相關職責由不純的父組件來承擔。綜上，我們的組件需要 state 來存儲一定的邏輯狀態，並且需要可以訪問並更改 state 的方法函數。class 就是一個很好的表現形式：要渲染的內容（props 或 state）放在類的屬性裡，那些處理用戶交互的回調函數和生命周期函數放在類的方法裡。
  • React Status 中文周刊 #19 - React Hook發布兩周年回顧
    React Hook 已發布兩年之久，讓我們跟隨推薦文章一起了解下 Hook 的前世今生。除 React 相關外，還有一個框架推薦，近來關於 Tailwind 和 CSS-in-JS 的話題不斷，與其糾結用哪個，不如全都要？應各位大佬要求，二維碼下添加了連結，但閱讀原文更佳哦~電腦閱讀，請閱讀原文。
  • React hooks 最佳實踐【更新中】
    隨著目前需求更新的節奏越來越快，我們目前更多時候原因使用 function component 來代替類的寫法，在 hooks 推出之後，我們也可以完全使用
  • 「不容錯過」手摸手帶你實現 React Hooks
    轉自手寫 React Hookshttps://juejin.im/post/6872223515580481544手寫 React Hooks Hooks 是 React 16.8 新增的特性，它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性凡是 use 開頭的 React API 都是 HooksHook
  • 使用React Hooks代替類的6大理由
    handleClickEvent = () => { this.setState({count: this.state.count + 1}); }讓我們看看如何使用 hooks 實現相同的功能。
  • React:useHooks小竅門
    /p/66170210Hooks是React 16.8新增的一項特性，可以讓你在不使用class的情況下去使用state和React的其他功能。It’s almost as if hooks bring the compositional power of React components to stateful logic!