完整高頻題庫(kù)倉(cāng)庫(kù)地址：https://github.com/hzfe/awesome-interview
完整高頻題庫(kù)閱讀地址：https://febook.hzfe.org/
相關(guān)問(wèn)題
- React Hooks 是什么
- React Hooks 是怎么實(shí)現(xiàn)的
- 使用 React Hooks 需要注意什么
回答關(guān)鍵點(diǎn)
閉包 Fiber 鏈表
Hooks 是 React 16.8 的新增特性楔壤。它可以讓你在不編寫(xiě) class 的情況下使用 state 以及其他的 React 特性魄宏。
Hooks 主要是利用閉包來(lái)保存狀態(tài)篡帕，使用鏈表保存一系列 Hooks志于，將鏈表中的第一個(gè) Hook 與 Fiber 關(guān)聯(lián)悯嗓。在 Fiber 樹(shù)更新時(shí)摸柄，就能從 Hooks 中計(jì)算出最終輸出的狀態(tài)和執(zhí)行相關(guān)的副作用。
使用 Hooks 的注意事項(xiàng)：
- 不要在循環(huán)碍舍，條件或嵌套函數(shù)中調(diào)用 Hooks柠座。
- 只在 React 函數(shù)中調(diào)用 Hooks。
知識(shí)點(diǎn)深入
1. 簡(jiǎn)化實(shí)現(xiàn)
該示例是一個(gè) React Hooks 接口的簡(jiǎn)化模擬實(shí)現(xiàn)片橡，可以實(shí)際運(yùn)行觀察妈经。其中 react.js 文件模擬實(shí)現(xiàn)了 useState 和 useEffect 接口，其基本原理和 react 實(shí)際實(shí)現(xiàn)類似捧书。
2. 對(duì)比分析
2.1 狀態(tài) Hook
模擬的 useState 實(shí)現(xiàn)中吹泡，通過(guò)閉包，將 state 保存在 memoizedState[cursor]鳄厌。 memoizedState 是一個(gè)數(shù)組荞胡，可以按順序保存 hook 多次調(diào)用產(chǎn)生的狀態(tài)。
let memoizedState = [];
let cursor = 0;
function useState(initialValue) {
// 初次調(diào)用時(shí)了嚎，傳入的初始值作為 state泪漂，后續(xù)使用閉包中保存的 state
let state = memoizedState[cursor] ?? initialValue;
// 對(duì)游標(biāo)進(jìn)行閉包緩存，使得 setState 調(diào)用時(shí)歪泳，操作正確的對(duì)應(yīng)狀態(tài)
const _cursor = cursor;
const setState = (newValue) => (memoizedState[_cursor] = newValue);
// 游標(biāo)自增萝勤，為接下來(lái)調(diào)用的 hook 使用時(shí)，引用 memoizedState 中的新位置
cursor += 1;
return [state, setState];
}
實(shí)際的 useState 實(shí)現(xiàn)經(jīng)過(guò)多方面的綜合考慮呐伞，React 最終選擇將 Hooks 設(shè)計(jì)為順序結(jié)構(gòu)敌卓，這也是 Hooks 不能條件調(diào)用的原因。
function mountState<S>(
initialState: (() => S) | S
): [S, Dispatch<BasicStateAction<S>>] {
// 創(chuàng)建 Hook伶氢，并將當(dāng)前 Hook 添加到 Hooks 鏈表中
const hook = mountWorkInProgressHook();
// 如果初始值是函數(shù)趟径，則調(diào)用函數(shù)取得初始值
if (typeof initialState === "function") {
initialState = initialState();
}
hook.memoizedState = hook.baseState = initialState;
// 創(chuàng)建一個(gè)鏈表來(lái)存放更新對(duì)象
const queue = (hook.queue = {
pending: null,
dispatch: null,
lastRenderedReducer: basicStateReducer,
lastRenderedState: initialState,
});
// dispatch 用于修改狀態(tài)，并將此次更新添加到更新對(duì)象鏈表中
const dispatch: Dispatch<BasicStateAction<S>> = (queue.dispatch =
(dispatchAction.bind(null, currentlyRenderingFiber, queue): any));
return [hook.memoizedState, dispatch];
}
2.1 副作用 Hook
模擬的 useEffect 實(shí)現(xiàn)癣防，同樣利用了 memoizedState 閉包來(lái)存儲(chǔ)依賴數(shù)組蜗巧。依賴數(shù)組進(jìn)行淺比較，默認(rèn)的比較算法是 Object.is蕾盯。
function useEffect(cb, depArray) {
const oldDeps = memoizedState[cursor];
let hasChange = true;
if (oldDeps) {
// 對(duì)比傳入的依賴數(shù)組與閉包中保存的舊依賴數(shù)組幕屹，采用淺比較算法
hasChange = depArray.some((dep, i) => !Object.is(dep, oldDeps[i]));
}
if (hasChange) cb();
memoizedState[cursor] = depArray;
cursor++;
}
實(shí)際的 useEffect 實(shí)現(xiàn)：
function mountEffect(
create: () => (() => void) | void,
deps: Array<mixed> | void | null
): void {
return mountEffectImpl(
UpdateEffect | PassiveEffect, // fiberFlags
HookPassive, // hookFlags
create,
deps
);
}
function mountEffectImpl(fiberFlags, hookFlags, create, deps): void {
// 創(chuàng)建hook
const hook = mountWorkInProgressHook();
const nextDeps = deps === undefined ? null : deps;
// 設(shè)置 workInProgress 的副作用標(biāo)記
currentlyRenderingFiber.flags |= fiberFlags; // fiberFlags 被標(biāo)記到 workInProgress
// 創(chuàng)建 Effect, 掛載到 hook.memoizedState 上
hook.memoizedState = pushEffect(
HookHasEffect | hookFlags, // hookFlags 用于創(chuàng)建 effect
create,
undefined,
nextDeps
);
}
3. Hooks 如何與 Fiber 共同工作
在了解如何工作之前，先看看 Hook 與 Fiber 的部分結(jié)構(gòu)定義：
export type Hook = {
memoizedState: any, // 最新的狀態(tài)值
baseState: any, // 初始狀態(tài)值
baseQueue: Update<any, any> | null,
queue: UpdateQueue<any, any> | null, // 環(huán)形鏈表级遭，存儲(chǔ)的是該 hook 多次調(diào)用產(chǎn)生的更新對(duì)象
next: Hook | null, // next 指針望拖，之下鏈表中的下一個(gè) Hook
};
export type Fiber = {
updateQueue: mixed, // 存儲(chǔ) Fiber 節(jié)點(diǎn)相關(guān)的副作用鏈表
memoizedState: any, // 存儲(chǔ) Fiber 節(jié)點(diǎn)相關(guān)的狀態(tài)值
flags: Flags, // 標(biāo)識(shí)當(dāng)前 Fiber 節(jié)點(diǎn)是否有副作用
};
與上節(jié)中的模擬實(shí)現(xiàn)不同，真實(shí)的 Hooks 是一個(gè)單鏈表的結(jié)構(gòu)挫鸽，React 按 Hooks 的執(zhí)行順序依次將 Hook 節(jié)點(diǎn)添加到鏈表中说敏。下面以 useState 和 useEffect 兩個(gè)最常用的 hook 為例，來(lái)分析 Hooks 如何與 Fiber 共同工作掠兄。
在每個(gè)狀態(tài) Hook（如 useState）節(jié)點(diǎn)中像云，會(huì)通過(guò) queue 屬性上的循環(huán)鏈表記住所有的更新操作锌雀，并在 updade 階段依次執(zhí)行循環(huán)鏈表中的所有更新操作，最終拿到最新的 state 返回迅诬。
狀態(tài) Hooks 組成的鏈表的具體結(jié)構(gòu)如下圖所示：
在每個(gè)副作用 Hook（如 useEffect）節(jié)點(diǎn)中腋逆，創(chuàng)建 effect 掛載到 Hook 的 memoizedState 中，并添加到環(huán)形鏈表的末尾侈贷，該鏈表會(huì)保存到 Fiber 節(jié)點(diǎn)的 updateQueue 中惩歉，在 commit 階段執(zhí)行。
副作用 Hooks 組成的鏈表的具體結(jié)構(gòu)如下圖所示：
