本篇文章給大家?guī)砹岁P(guān)于Hooks與vue的相關(guān)知識，Hooks是React在V16.7.0-alpha版本中引入的，Hooks主要是對模式的復(fù)用提供了一種更明確的思路，希望對大家有幫助。

不要把 Hooks 和 Vue 的生命周期鉤子（Lifecycle Hooks） 弄混了，Hooks 是 React 在 V16.7.0-alpha 版本中引入的，而且?guī)滋旌?Vue 發(fā)布了其概念驗證版本。雖然 Hooks 是由 React 提出的，它是一個對各 JavaScript 框架生態(tài)系統(tǒng)都有價值的、重要的組合機制，因此我們今天會花一點時間討論 Hooks 意味著什么。

Hooks主要是對模式的復(fù)用提供了一種更明確的思路 —— 避免重寫組件本身，并允許有狀態(tài)邏輯的不同部分能無縫地進行協(xié)同工作。

最初的問題

就 React 而言，問題在于：在表達狀態(tài)的概念時，類是最常見的組件形式。無狀態(tài)函數(shù)式組件也非常受歡迎，但由于它們只能單純地渲染，所以它們的用途僅限于展示任務(wù)。

類本身存在一些問題。例如，隨著 React 變得越來越流行，類的問題也普遍成為新手的阻礙。開發(fā)者為了理解 React，也必須理解類。綁定使得代碼冗長且可讀性差，并且需要理解 JavaScript 中的 this。這里還討論了使用類所帶來的一些優(yōu)化障礙。

在邏輯復(fù)用方面，我們通常使用 render props 和高階組件等模式。但使用這些模式后會發(fā)現(xiàn)自己處于類似的“厄運金字塔”中 —— 樣式實現(xiàn)地獄，即過度使用嵌套可能會導(dǎo)致組件難以維護。這導(dǎo)致我想對 Dan Abramov 像喝醉了一樣大吼大叫，沒有人想要那樣。

Hooks 允許我們使用函數(shù)調(diào)用來定義組件的有狀態(tài)邏輯，從而解決這些問題。這些函數(shù)調(diào)用變得更具有組合性、可復(fù)用性，并且允許我們在使用函數(shù)式組件的同時能夠訪問和維護狀態(tài)。React 發(fā)布 Hooks 時，人們很興奮 —— 下面你可以看到 Hooks 展示的一些優(yōu)勢，關(guān)于它們?nèi)绾螠p少代碼和重復(fù)：

在維護方面，簡單性是關(guān)鍵，Hooks 提供了一種單一的、函數(shù)式的方式來實現(xiàn)邏輯共享，并且可能代碼量更小。

為什么 Vue 中需要 Hooks？

讀到這里你肯定想知道 Hooks 在 Vue 中必須提供什么。這似乎是一個不需要解決的問題。畢竟，類并不是 Vue 主要使用的模式。Vue 提供無狀態(tài)函數(shù)式組件（如果需要它們），但為什么我們需要在函數(shù)式組件中攜帶狀態(tài)呢？我們有 mixins 用于組合可以在多個組件復(fù)用的相同邏輯。問題解決了。

我想到了同樣的事情，但在與 Evan You 交談后，他指出了我忽略的一個主要用例：mixins 不能相互消費和使用狀態(tài)，但 Hooks 可以。這意味著如果我們需要鏈式封裝邏輯，可以使用 Hooks。

Hooks 實現(xiàn)了 mixins 的功能，但避免了 mixins 帶來的兩個主要問題：

• 允許相互傳遞狀態(tài)。
• 明確指出邏輯來自哪里。

如果使用多個 mixins，我們不清楚哪個屬性是由哪個 mixins 提供的。使用 Hooks，函數(shù)的返回值會記錄消費的值。

那么，這在 Vue 中如何運行呢？我們之前提到過，在使用 Hooks 時，邏輯在函數(shù)調(diào)用時表達從而可復(fù)用。在 Vue 中，這意味著我們可以將數(shù)據(jù)調(diào)用、方法調(diào)用或計算屬性調(diào)用封裝到另一個自定義函數(shù)中，并使它們可以自由組合。數(shù)據(jù)、方法和計算屬性現(xiàn)在可用于函數(shù)式組件了。

例子

讓我們來看一個非常簡單的 hook，以便我們在繼續(xù)學(xué)習(xí) Hooks 中的組合例子之前理解構(gòu)建塊。

useWat?

好的，Vue Hooks 和 React Hooks 之間存在交叉部分。使用 use 作為前綴是 React 的約定，所以如果你在 React 中查找 Hooks，你會發(fā)現(xiàn) Hooks 的名稱都會像 useState、useEffect 等。