為什么必須在函數(shù)頂層使用hooks？

使用過 hooks 的小伙伴應(yīng)該都會發(fā)現(xiàn)，hooks只能在函數(shù)式組件的頂層使用，不能在循環(huán)，條件或嵌套函數(shù)中調(diào)用 Hook。

為什么呢？

查閱了很多答案，總結(jié)如下：

hooks 是 react 16.8版本推出的，而react v16版本最大的改變就是引入了fiber架構(gòu)。hooks的實現(xiàn)就是基于fiber的。每個組件都會生成一個 FiberNode（節(jié)點），組件內(nèi)使用的 hook 會以鏈表的形式掛在 FiberNode 的 memoizedState 上面。各個 FiberNode 匯聚起來會變成一顆 Fiber 樹，React 每次會以固定的順序遍歷這棵樹，這樣就把整個頁面的 hook 都串聯(lián)起來了。
當(dāng) react 重新渲染時，會生成一個新的 fiber 樹，而這里會根據(jù)之前已經(jīng)生成的 FiberNode ，拿到之前的 hook ，再復(fù)制一份到新的 FiberNode 上，生成一個新的 hooks 鏈表。
react按順序來區(qū)分不同的 hook，它默認(rèn)你不會修改這個順序。如果你沒有在頂層使用 hook ，打亂了每次 hook 調(diào)用的順序，就會導(dǎo)致 react 無法區(qū)分出對應(yīng)的 hook