好的 ??，你問(wèn)的是 React 16 中所有 Hooks 的底層實(shí)現(xiàn)和原理。

這里我會(huì)分幾個(gè)層次來(lái)解釋：

1. React 16 的背景
2. Hooks 的設(shè)計(jì)理念
3. 核心 Hooks 的底層實(shí)現(xiàn)思路（useState, useEffect, useContext, …）
4. React 內(nèi)部的 Hook 數(shù)據(jù)結(jié)構(gòu)
5. 執(zhí)行流程（函數(shù)組件渲染時(shí) Hook 的調(diào)用順序）

1. 背景：React 16 與 Hooks

• React 16.8 是第一個(gè)支持 Hooks 的版本。
• 目標(biāo)：讓函數(shù)組件具備狀態(tài)（state）和副作用（effect）的能力，替代部分 class 組件邏輯（比如 componentDidMount / componentDidUpdate / componentWillUnmount）。
• 核心思想：通過(guò)“調(diào)用順序”來(lái)匹配 Hook 與組件的 fiber 節(jié)點(diǎn)，避免顯式 id。

2. Hooks 的設(shè)計(jì)理念

React Hooks 有幾個(gè)原則：

1. 只能在函數(shù)組件頂層調(diào)用，不能在條件語(yǔ)句或循環(huán)里動(dòng)態(tài)調(diào)用。
2. • 這是因?yàn)?Hooks 依賴調(diào)用順序來(lái)定位。
3. 只能在 React 函數(shù)組件或自定義 Hook 中調(diào)用。
4. 每個(gè)組件 fiber 節(jié)點(diǎn)維護(hù)一個(gè)單鏈表，鏈表節(jié)點(diǎn)就是 Hook 對(duì)象。

?? 這就是為什么 eslint-plugin-react-hooks 會(huì)強(qiáng)制規(guī)則：不要在 if/for 中調(diào)用 Hook。

3. 常見 Hooks 的底層原理

(1)useState

• 本質(zhì)是 useReducer 的語(yǔ)法糖。
• 內(nèi)部維護(hù)一個(gè) Hook 節(jié)點(diǎn)對(duì)象（鏈表的一部分）：

type Hook = {
  memoizedState: any,     // 當(dāng)前的 state
  baseState: any,         // 初始 state
  queue: UpdateQueue,     // 更新隊(duì)列（鏈表結(jié)構(gòu)）
  next: Hook | null       // 指向下一個(gè) Hook
}

• 當(dāng)你調(diào)用 useState(initial) 時(shí)：
• • 創(chuàng)建一個(gè)更新對(duì)象（action）。
  • 掛到 queue 上。
  • 觸發(fā) scheduleUpdateOnFiber，進(jìn)入調(diào)度。
• 1. React 在當(dāng)前 fiber 上創(chuàng)建一個(gè) Hook 節(jié)點(diǎn)，memoizedState = initial。
  2. 返回 [state, dispatch]。
  3. dispatch 本質(zhì)是一個(gè)函數(shù)：
• 渲染時(shí)，React 會(huì)執(zhí)行 processUpdateQueue，消費(fèi) queue，更新 memoizedState。

(2)useEffect

• 保存副作用函數(shù)和依賴數(shù)組。
• Hook 節(jié)點(diǎn)結(jié)構(gòu)：

type Effect = {
  tag: HookFlags,          // effect 類型（Passive, Layout 等）
  create: () => (() => void) | void,  // 副作用函數(shù)
  destroy?: () => void,    // 清理函數(shù)
  deps: any[] | null,      // 依賴
  next: Effect | null
}

• 調(diào)用 useEffect(fn, deps) 時(shí)：
• • 如果 deps 變了，就調(diào)用上一次的 destroy（清理），再執(zhí)行新的 create。
  • 如果沒變，則跳過(guò)。
• 1. React 在 Hook 節(jié)點(diǎn)里記錄 create 和 deps。
  2. 在 commit 階段（DOM 更新后），React 比較新舊依賴：

(3)useLayoutEffect

• 和 useEffect 類似，但執(zhí)行時(shí)機(jī)不同：
• • useLayoutEffect 在 DOM 更新后、瀏覽器繪制前 執(zhí)行（同步）。
  • useEffect 在 瀏覽器繪制后 執(zhí)行（異步，延遲）。
• 用于測(cè)量 DOM、同步操作。

(4)useContext

• 獲取 Context 的值。
• 機(jī)制：
• • 組件調(diào)用 useContext(MyContext) 時(shí)，會(huì)在 fiber 上記錄對(duì) MyContext 的依賴。
  • 當(dāng) Context Provider 的值變化時(shí)，React 會(huì)找到所有依賴它的消費(fèi) fiber，觸發(fā)更新。

(5)useReducer

• 類似 Redux 的 reducer：

• • useState 底層其實(shí)就是 useReducer 的特例：

    useState(initial) === useReducer((s, a) => typeof a === 'function' ? a(s) : a, initial)
    

• 保存 reducer 和 state，通過(guò) dispatch 觸發(fā)更新。

(6)useRef

• 維護(hù)一個(gè) { current: any } 對(duì)象，整個(gè)生命周期內(nèi)保持引用不變。
• 實(shí)現(xiàn)：只在 Hook 節(jié)點(diǎn)里存一個(gè) memoizedState = { current: initialValue }，之后不會(huì)更新。

(7)useMemo/useCallback

• 本質(zhì)是“帶緩存的值 / 函數(shù)”。
• Hook 節(jié)點(diǎn)保存 value 和 deps。
• 渲染時(shí)對(duì)比依賴數(shù)組：
• • 如果沒變，直接返回舊值。
  • 如果變了，重新計(jì)算并緩存。

4. React 內(nèi)部 Hook 數(shù)據(jù)結(jié)構(gòu)

在 fiber 節(jié)點(diǎn)上，每個(gè)函數(shù)組件對(duì)應(yīng)一個(gè) Hook 鏈表：

type Fiber = {
  memoizedState: Hook | null; // hook 鏈表頭
  updateQueue: any;
  // ...
}

• renderWithHooks 函數(shù)：
• • 進(jìn)入函數(shù)組件渲染時(shí)，初始化 currentlyRenderingFiber。
  • 每調(diào)用一個(gè) Hook，就在鏈表上走一步，復(fù)用或新建節(jié)點(diǎn)。
  • 保證 “調(diào)用順序一致 = Hook 順序一致”。

5. Hook 執(zhí)行流程總結(jié)

1. 初次渲染
2. • 執(zhí)行函數(shù)組件，依次調(diào)用 useState / useEffect …
   • 為每個(gè) Hook 創(chuàng)建一個(gè) Hook 節(jié)點(diǎn)，掛到 fiber.memoizedState 鏈表上。
3. 更新渲染
4. • 執(zhí)行組件時(shí)，React 會(huì)遍歷 fiber.memoizedState 鏈表。
   • 每次調(diào)用 Hook，就拿到對(duì)應(yīng)節(jié)點(diǎn)，復(fù)用之前的狀態(tài)。
   • 如果調(diào)用順序錯(cuò)了（比如把 Hook 放到 if 里），鏈表錯(cuò)位，React 會(huì)報(bào)錯(cuò)。
5. 提交階段（commit phase）
6. • 對(duì)于 useEffect / useLayoutEffect，會(huì)根據(jù)依賴比較來(lái)執(zhí)行副作用。
   • 對(duì)于 useState / useReducer，會(huì)處理更新隊(duì)列，得到新 state。

? 總結(jié)：

• React Hooks 的底層實(shí)現(xiàn)是 fiber 節(jié)點(diǎn)上的 Hook 鏈表 + 調(diào)用順序保證。
• 每個(gè) Hook 維護(hù)一個(gè)小的狀態(tài)對(duì)象，存儲(chǔ) memoizedState、queue、deps 等。
• useState 基于更新隊(duì)列；useEffect 延遲到 commit 階段執(zhí)行；useRef 只是一個(gè)穩(wěn)定對(duì)象；useMemo / useCallback 做依賴比較。

到此這篇關(guān)于react16中的hooks的底層實(shí)現(xiàn)原理的文章就介紹到這了,更多相關(guān)react16 hooks底層原理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論