本文是深入淺出 ahooks 原始碼系列文章的第五篇，該系列已整理成檔案-地址，覺得還不錯，給個 star 支持一下哈，Thanks，
本文來探索一下 ahooks 是怎么封裝 React 的一些執行“時機”的？
Function Component VS Class Component
學習類似 React 和 Vue 這種框架，對它們生命周期的掌握都是必須的，我們需要清楚的知道我們代碼的執行順序，并且在不同的階段執行不同操作的代碼，比如需要掛載完成之后才去獲取 dom 的值，否則可能會獲取不到相應的值，
Class Component
使用過 React 的 Class Component 的同學，就會知道其組件生命周期會分成三個狀態：
- Mounting(掛載)：已插入真實 DOM
- Updating(更新)：正在被重新渲染
- Unmounting(卸載)：已移出真實 DOM
簡單版如下所示：
其中每個狀態中還會按順序呼叫不同的方法，對應的詳細如下（這里不展開說）：
可以通過官方提供這個網站查看詳情
可以看到，會有非常多的生命周期方法，而且在不同的版本，生命周期方法還不同，
Function Component
到了 Function Component ，會發現沒有直接提及生命周期的概念，它是更徹底的狀態驅動，它只有一個狀態，React 負責將狀態渲染到視圖中，
對于 Function Component 來說由狀態到頁面渲染只有三步：
- 輸入狀態（prop、state）
- 執行組件的邏輯，并在
useEffect/useLayoutEffect中訂閱副作用 - 輸出UI（Dom節點）
重點是第二步，React 通過 useEffect/useLayoutEffect 訂閱副作用，Class Component 中的生命周期都可以通過 useEffect/useLayoutEffect 來實作，它們兩個的功能非常相似，我們這里看下 useEffect，
使用 useEffect 相當于告訴 React 組件需要在渲染后執行某些操作，React 將在執行 DOM 更新之后呼叫它，React 保證了每次運行 useEffect 的時候，DOM 已經更新完畢，這就實作了 Class Component 中的 Mounting(掛載階段)，
當狀態發生變化的時候，它能夠執行對應的邏輯、更行狀態并將結果渲染到視圖中，這就完成了 Class Component 中的 Updating（更新階段），
最后通過在 useEffect 中回傳一個函式，它便可以清理副作用，它的規則是：
- 首次渲染不會進行清理，會在下一次渲染，清除上一次的副作用，
- 卸載階段也會執行清除操作，
通過回傳一個函式，我們就能實作 Class Component 中的 Unmounting(卸載階段)，
基于 useEffect/useLayoutEffect，ahooks 做了一些封裝，能夠讓你更加清晰的知道你的代碼執行時機，
LifeCycle - 生命周期
useMount
只在組件初始化時執行的 Hook，
useEffect 依賴假如為空，只會在組件初始化的時候執行，
// 省略部分代碼
const useMount = (fn: () => void) => {
// 省略部分代碼
// 單純就在 useEffect 基礎上封裝了一層
useEffect(() => {
fn?.();
}, []);
};
export default useMount;
useUnmount
useUnmount，組件卸載（unmount）時執行的 Hook，
useEffect 可以在組件渲染后實作各種不同的副作用，有些副作用可能需要清除，所以需要回傳一個函式，這個函式會在組件卸載的時候執行，
const useUnmount = (fn: () => void) => {
const fnRef = useLatest(fn);
useEffect(
// 在組件卸載（unmount）時執行的 Hook，
// useEffect 的回傳值中執行函式
() => () => {
fnRef.current();
},
[],
);
};
export default useUnmount;
useUnmountedRef
獲取當前組件是否已經卸載的 Hook，
通過判斷有沒有執行 useEffect 中的回傳值判斷當前組件是否已經卸載，
// 獲取當前組件是否已經卸載的 Hook，
const useUnmountedRef = () => {
const unmountedRef = useRef(false);
useEffect(() => {
unmountedRef.current = false;
// 如果已經卸載，則會執行 return 中的邏輯
return () => {
unmountedRef.current = true;
};
}, []);
return unmountedRef;
};
export default useUnmountedRef;
Effect
這里只會講官方檔案
Effect下面的幾個，有部分是定時器、防抖節流等，咱們后面的系列具體分析，
useUpdateEffect 和 useUpdateLayoutEffect
useUpdateEffect 和 useUpdateLayoutEffect 的用法跟 useEffect 和 useLayoutEffect 一樣，只是會忽略首次執行，只在依賴更新時執行，
實作思路：初始化一個識別符號，剛開始為 false，當首次執行完的時候，置為 true，只有識別符號為 true 的時候，才執行回呼函式，
// 忽略首次執行
export const createUpdateEffect: (hook: effectHookType) => effectHookType =
(hook) => (effect, deps) => {
const isMounted = useRef(false);
// for react-refresh
hook(() => {
return () => {
isMounted.current = false;
};
}, []);
hook(() => {
// 首次執行完時候，設定為 true，從而下次依賴更新的時候可以執行邏輯
if (!isMounted.current) {
isMounted.current = true;
} else {
return effect();
}
}, deps);
};
useDeepCompareEffect和useDeepCompareLayoutEffect
用法與 useEffect 一致，但 deps 通過 lodash isEqual 進行深比較，
通過 useRef 保存上一次的依賴的值，跟當前的依賴對比（使用 lodash 的 isEqual），并將對比結果作為 useEffect 的依賴項，從而決定回呼函式是否執行，
const depsEqual = (aDeps: DependencyList, bDeps: DependencyList = []) => {
return isEqual(aDeps, bDeps);
};
const useDeepCompareEffect = (effect: EffectCallback, deps: DependencyList) => {
// 通過 useRef 保存上一次的依賴的值
const ref = useRef<DependencyList>();
const signalRef = useRef<number>(0);
// 判斷最新的依賴和舊的區別
// 如果相等，則變更 signalRef.current，從而觸發 useEffect 中的回呼
if (!depsEqual(deps, ref.current)) {
ref.current = deps;
signalRef.current += 1;
}
useEffect(effect, [signalRef.current]);
};
useUpdate
useUpdate 會回傳一個函式，呼叫該函式會強制組件重新渲染，
回傳的函式通過變更 useState 回傳的 state，從而促使組件進行更新，
import { useCallback, useState } from 'react';
const useUpdate = () => {
const [, setState] = useState({});
// 通過設定一個全新的狀態，促使 function 組件更新
return useCallback(() => setState({}), []);
};
export default useUpdate;
總結與思考
在我們寫代碼的時候需要清晰的知道，組件的生命周期是怎樣的，我們代碼的執行順序、執行的時機是怎樣的，
在 Function Component 中，使用 useEffect/useLayoutEffect 完成了 Class Components 生命周期的職責，ahooks 也是基于這兩個封裝了常見的代碼執行時機，使用這些 hook，可以讓我們的代碼更加具有可讀性以及邏輯更加清晰，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/501749.html
標籤：其他