[譯] React Hook 介紹 — React 系列教程 Part 1

• 原文地址：Introducing Hooks
• 原文做者：reactjs.org
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：Sam
• 校對者：Raoul1996

Hook 介紹

Hook 是一項新的功能提案，可讓你在不編寫類的狀況下使用狀態（state）和其餘 React 功能。它們目前處於 React v16.7.0-alpha 階段，而且在開放式 RFC 中進行着討論。

import { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
複製代碼

這個 useState 新功能將是咱們學習的第一個「鉤子」，但這個例子僅僅是個預告。即使你對它沒感受也不用擔憂！

你能夠在下一頁開始學習 Hook。在本頁面上，咱們將繼續解釋爲何咱們要將 Hook 添加到 React 中，以及它們如何幫助你編寫出色的應用。

沒有重大的變化

在咱們繼續以前，請注意 Hook 是：

• 徹底可選擇引入。 你無需重寫任何現有代碼，就能在一些組件裏嘗試使用 Hook。但若是你不想，你沒必要如今學習或使用 Hook。
• 100% 向後兼容。 Hook 不包含任何重大的更改。
• 如今可用。 Hook 目前處於 alpha 版本，咱們但願在收到社區反饋後把它們包含在 React 16.7 中。

沒有把類從 React 中移除的計劃。 你能夠在本頁面底部閱讀更多關於漸進式採用 Hook 的策略信息。

Hook 不會取代你對 React 概念的理解。 相反地，Hook 爲你已知的 React 概念（props、state、context、refs 和 lifecycle）提供了更直接的 API。而且稍後咱們還將演示，Hook 還提供了一種組合它們新的強大的方式。

若是你只是想開始學習 Hook，請隨意直接跳到下一頁！ 你也能夠繼續閱讀本頁，詳細瞭解咱們爲何要添加 Hook，以及咱們是如何在不重寫應用程序的狀況下開始使用它們的。

動機

Hook 解決了咱們在過去五年時間裏編寫和維護數以萬計 React 組件時遇到的各類看似不相關的問題。不管你是在學習 React，仍是平常使用，甚至說是喜歡使用具備相似組件模型的其餘庫，你都有可能注意到這些問題。

在組件之間重用帶狀態邏輯很困難

React 沒有提供把可重用行爲「附加」到組件上的方法（例如，把它關聯到 store 裏）。若是你已經使用了 React 一段時間，你可能會熟練使用渲染屬性和高階組件的模式嘗試解決這個問題。但這些模式須要你在使用它們的時候對組件進行重構，這可能會很麻煩而且使代碼更難以跟蹤。若是你看一下 React DevTools 裏的典型 React 應用程序，你也許會發現一個由提供者、消費者、高階組件、渲染屬性和其餘抽象層包裹起來的「包裝地獄」組件。雖然咱們能夠在 React DevTools 中過濾它們，但這裏引出了一個更深層次的基本問題：React 須要一個更好的分享帶狀態邏輯的原語。

使用 Hook，你能夠從一個組件中導出帶狀態邏輯，以便它能夠單獨測試和複用。Hook 容許你在不改變組件層次結構的狀況下複用帶狀態邏輯。 這樣就能夠輕鬆地在多個組件之間或者社區裏共享 Hook。

咱們將在編寫自定義鉤子裏進行更多的討論。

複雜的組件變得難以理解

咱們常常不得不維護從簡單開始，但後來變成混雜着帶狀態邏輯和反作用沒法管理的組件。每一個生命週期方法一般都包含了一堆不相關的邏輯。例如，組件也許要在 componentDidMount 和 componentDidUpdate 方法裏請求數據。可是，一樣是在 componentDidMount 方法，可能會包含不相關的設置事件監聽的邏輯，還得在 componentWillUnmount 裏清除。本該一塊兒更改的相關聯代碼被拆分，而徹底不相關的代碼卻最終組合到一個方法裏。這就太容易引入 bug 和致使不一致了。

不少狀況下不可能把這些組件拆分得更小，由於處處都有帶狀態的邏輯。並且測試它們也很困難。這就是許多人更喜歡將 React 與單獨的狀態管理庫相結合的緣由之一。可是，這一般會引入太多的抽象(概念)，使得你在不一樣的文件之間跳轉，同時讓重用組件變得更加困難。

爲了解決這個問題，Hook 容許你基於相關聯的部分(例如設置訂閱或獲取數據)把一個組件拆分紅較小的函數，而不是基於生命週期函數強制拆分。你還能夠選擇使用 reducer 管理組件的本地狀態，以使其更具可預測性。

咱們將在使用效果 Hook 裏更多地討論這個問題。

類（Class）混淆了人類和機器

經過咱們的觀察，發現類是學習 React 最大的障礙。你必須理解 this 在 JavaScript 中是怎麼工做的，大多數語言中它的工做方式有很大不一樣。你必須記住綁定事件處理程序。若是沒有不穩定的語法提案，代碼就很是冗長。人們能夠很好地理解屬性，狀態和自上而下的數據流，但仍然很艱難地與類做鬥爭。React 中的函數和類組件之間的區別以及什麼時候使用哪一種組件，即便在經驗豐富的 React 開發人員之間也會引起分歧。

此外，React 已經推出大概五年時間了，而且咱們但願確保它在將來的五年裏還保持相關性。就像 Svelte，Angular，Glimmer 和其餘人代表的那樣，提早編譯組件將來有很大的潛力。特別是在它不侷限於模版的狀況下。目前，咱們已經使用 Prepack 作了組件摺疊的實驗，而且咱們已經看到了有前景的早期結果。可是，咱們發現類組件可能會引起無心識的模式使得這些優化回退到較慢的路徑上。類也給今天的工具提出了問題。例如，類不能很好地壓縮，而且它們使得熱更新加載變得片狀和不可靠。咱們但願提供一種 API，使代碼更可能的留在可優化的路徑上。

爲了解決這個問題，Hook 容許你在沒有類的狀況下使用更多 React 的功能。 概念上來講，React 組件一直是更接近於函數的。Hook 擁抱函數，但不會犧牲掉 React 實際的精神。Hook 提供了對命令式逃生艙口的訪問，而且不須要你學習複雜的函數式或反應式編程技術。

例子

Hook 概覽是開始學習 Hook 的好地方。

逐步採用策略

TLDR：沒有從 React 中移除類的計劃

咱們知道 React 開發者專一於發佈產品，沒有時間研究正在發佈的每一個新 API。Hook 是很新的，在考慮學習或採用它們以前等待更多的示例和教程可能會更好。

咱們也理解爲 React 添加新原語的標準很是高。對於好奇的讀者來講，咱們已經事先準備了一個詳細的 RFC，裏面有更多深刻細節的動機，並提供有關特定設計決策的額外視角和相關領先技術。

相當重要的是，Hook 和現有代碼是並行工做的，因此你能夠逐步採用它們。 咱們正在分享這個實驗性的 API，爲了是從社區中那些有興趣塑造 React 將來的人那裏獲得早期反饋 —— 而後咱們會在公開場合迭代 Hook。

最後，別急着遷移到 Hook。咱們建議避免任何「重大改寫」，特別是對於現有複雜的類組件。開始「考慮 Hook」須要一點心理上的轉變。根據咱們的經驗，最好先在新的和非相關的組件裏練習使用 Hook，並確保團隊中的每一個人都對它們感到滿意。在你嘗試 Hook 以後，請隨時給咱們發送反饋，不管是積極的仍是消極的。

咱們打算讓 Hook 能覆蓋全部現有的類用例，但咱們將在可預見的將來繼續支持類組件。 在 Facebook，咱們有數以萬計用類編寫的組件，顯然咱們沒有要重寫它們的計劃。相反地，咱們開始在新的代碼中並行使用 Hook 和類。

下一步

在本頁的末尾，你應該大體瞭解 Hook 正在解決的問題，但不少細節可能還不清楚。別擔憂！如今讓咱們進入下一頁，咱們經過示例開始學習 Hook。

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。