這篇文章《Where Did Hooks Come From?》主要討論了 React Hooks 的來(lái)源和背景。在引入 Hooks 之前，React 類需要擴(kuò)展 React.Component 或 React.PureComponent，而 React 本身沒(méi)有提供共享代碼的 API。因此，React 社區(qū)開(kāi)發(fā)人員創(chuàng)建了兩種有效共享組件代碼的模式，分別是高階組件（Higher Order Components，簡(jiǎn)稱 HOC）和 Render Props。這些模式在一定程度上解決了代碼重用的問(wèn)題，但仍然存在一些局限性。為了更好地解決這些問(wèn)題，React Hooks 被引入，為開(kāi)發(fā)者提供了一種更簡(jiǎn)潔、易于理解的方式來(lái)共享和重用組件的邏輯。

下面是正文~~

Hooks 是用于在組件之間共享通用邏輯的。明確地說(shuō)，我們所說(shuō)的“邏輯”并不是指組件的 UI 部分（JSX）。我們談?wù)摰氖墙M件中 JSX 之前的所有內(nèi)容。在基于類的組件中，我們會(huì)說(shuō)它在生命周期方法和自定義方法中。在功能組件中，它只是 JSX 之上的東西。

在某種程度上，Hooks 的故事與 React 及其先前用于共享代碼的 API 的故事密切相關(guān)。所以請(qǐng)耐心聽(tīng)我從頭說(shuō)起...

2013：第一個(gè)React API：

React 開(kāi)發(fā)者不喜歡 mixins，這是共享邏輯的第一個(gè) API。

最初，React 有一種在組件之間共享通用邏輯的方法，稱為 mixins。這是在 JavaScript 擁有類之前的 React 早期。這些偽類看起來(lái)的組件允許“混入”可共享的邏輯。當(dāng)時(shí)，mixins 被指責(zé)為社區(qū)開(kāi)始流行的一些反模式的根本原因。因此，當(dāng) React 在 2016 年獲得真正的類時(shí)，大多數(shù) React 開(kāi)發(fā)人員為 mixins 的 API 消失而歡呼。

2016：類組件

在JavaScript在ES2015（ES6）中獲得類之后，React很快跟進(jìn)了今天仍然可以使用的類組件。但是，如果你對(duì)React較為陌生，可能會(huì)想知道為什么普遍認(rèn)為應(yīng)該在React中完全避免使用類組件？

主要原因是共享邏輯困難。當(dāng)我們失去了 mixins 時(shí)，我們也失去了一種原始的共享代碼方式。我們可以通過(guò)創(chuàng)建一個(gè)新組件來(lái)共享/重用 UI，以共享 JSX，但是沒(méi)有內(nèi)置方法可以共享生命周期方法，例如 componentDidMount 、 componentDidUpdate 和 componentWillUnmount 。 這些特定方法是我們可能希望管理組件副作用的地方。因此，如果您用某個(gè)副作用編寫(xiě) ComponentOne ，我們將不得不將該邏輯復(fù)制到 ComponentTwo ，從而使邏輯無(wú)法以一種只編寫(xiě)一次的方式抽象。

我們不能用繼承嗎？

class ComponentOne extends SharableStuff {
  // ...
}

class ComponentTwo extends SharableStuff {
  // ...
}

不，React 不允許我們編寫(xiě)從其他組件繼承的組件。而且，即使 React 允許你這樣做，你將如何將多個(gè)邏輯體共享到 ComponentOne ？不允許多重繼承，所以這不起作用：

class ComponentOne extends SharableStuffA extends SharableStuffB {
  // ...
}

React類必須擴(kuò)展 React.Component 或 React.PureComponent ，并且React本身沒(méi)有共享代碼的API。

社區(qū)雖然很聰明。React 開(kāi)發(fā)人員創(chuàng)建了兩種模式，有效地在組件之間共享代碼，這兩種模式被稱為高階組件（Hoc）和 Render Props。

無(wú)狀態(tài)函數(shù)組件

在同一時(shí)期，React 團(tuán)隊(duì)宣布了一種使用函數(shù)而不是類來(lái)創(chuàng)建組件的新方法。當(dāng)時(shí)的主要想法是擁有一個(gè)僅接受屬性并可以返回 JSX 的組件。沒(méi)有狀態(tài)或使用類似于類生命周期方法的 React API 的能力。

我們稱之為無(wú)狀態(tài)函數(shù)組件，因?yàn)樗鼈円膊荒苡袪顟B(tài)。

不久之后，React 團(tuán)隊(duì)告訴我們不要這樣稱呼它們。我們應(yīng)該稱之為函數(shù)組件，因?yàn)?..他們有計(jì)劃??

2018 Hooks

從本質(zhì)上講，Hooks 只是我們可以從函數(shù)組件中調(diào)用的函數(shù)。我們可以使用內(nèi)置的鉤子并編寫(xiě)自己的：

• 內(nèi)置鉤子：這些API（如 useState() ）使功能組件能夠“掛鉤”到React的所有功能。
• 自定義鉤子：這些只是我們編寫(xiě)的實(shí)現(xiàn)內(nèi)置鉤子的函數(shù)。自定義鉤子的一般概念是為任何想要使用它的組件創(chuàng)建可重用的邏輯。

React 有 useState() ，因此函數(shù)組件可以擁有與類狀態(tài)類似的自己的本地狀態(tài)。但是，如果刷新頁(yè)面，所有本地狀態(tài)都會(huì)重置（就像任何其他 JS 變量一樣）。因此，我們可以創(chuàng)建自己的 useLocalStorageState() ，它可能的工作方式與 useState() 完全相同，但還將狀態(tài)保持到 localStorage ，以便在刷新后恢復(fù)值。

下面是一個(gè)使用自定義鉤子共享數(shù)據(jù)獲取邏輯的示例。你不必完全了解如何使用 useState 和 useEffect ，只需要了解它們?yōu)榻M件執(zhí)行一些邏輯，我想共享它。如果另一個(gè)組件也想根據(jù) productId 獲取產(chǎn)品，那么需要重新編寫(xiě)下面高亮的代碼：

這里是相同的邏輯移至自定義鉤子。現(xiàn)在任何組件都可以使用 useFetchProduct 鉤子：

// Custom Hook
function useFetchProduct(productId) {
  const [product, setProduct] = useState(null)

  useEffect(() => {
    fetchProduct(productId).then((product) => setProduct(product))
  }, [productId])

  return product
}

function BrowseProducts({ productId }) {
  const product = useFetchProduct(productId)
  // return <div>...</div>
}

這是一個(gè)過(guò)于簡(jiǎn)化的例子，上面的 useEffect 代碼是不完整的。如果你想要一個(gè)獲取數(shù)據(jù)的自定義 Hook，推薦來(lái)自 React Query 的自定義鉤子，名為 useQuery() 。

如今，如果你愿意，你仍然可以使用類。如果你覺(jué)得它們更容易使用，那完全取決于你。然而，在類之間共享邏輯時(shí)，你將會(huì)遇到問(wèn)題。即使你可以接受這些問(wèn)題，并且你不覺(jué)得高階組件（HOC）和 Render Props 混亂，與過(guò)去五年開(kāi)始學(xué)習(xí) React 的其他開(kāi)發(fā)者合作或者組隊(duì)工作時(shí)，你可能會(huì)發(fā)現(xiàn)困難。

他們?cè)?Hooks 被當(dāng)作 React 主要方法教授時(shí)開(kāi)始接觸 React。他們可能不了解類組件的“進(jìn)退維谷”，如何處理這種奇怪的作用域問(wèn)題，以及何時(shí)以及如何使用 HOC 或 Render Props。此外，React 生態(tài)系統(tǒng)中絕大多數(shù)第三方庫(kù)已經(jīng)放棄了 HOC 和 Render Props，轉(zhuǎn)而采用了 Hooks。因此，你將無(wú)法輕松地使用它們的工具，因?yàn)?Hooks 僅適用于函數(shù)式組件。

我的一些朋友已經(jīng)使用 React 很長(zhǎng)時(shí)間了，他們記得這些討論和權(quán)衡。但是我注意到（至少在 Twitter 上），歷史正在重演。有一整代新的 React 開(kāi)發(fā)者不知道這個(gè)背景故事，也不知道我們?yōu)槭裁匆?Hooks。我承認(rèn)，Hooks 的某些部分比類更難，比如我們可能需要記憶化（ useMemo 和 useCallback ），但這是一種權(quán)衡。你可以選擇使用帶有 HoC 和 Render Props 的類（也不容易），或者使用具有輕松共享代碼能力的 Hooks，但需要理解記憶化的復(fù)雜性。