本文是深入淺出 ahooks 原始碼系列文章的第十二篇，該系列已整理成檔案-地址，覺得還不錯，給個 star 支持一下哈，Thanks，
今天我們來聊聊 ahooks 中那些可以幫助我們更優雅管理我們 state（狀態）的那些 hook，一些比較特殊的，比如 cookie/localStorage/sessionStorage，useUrlState等，我們已經單獨拿出來細講了，感興趣可以看看筆者的歷史文章，
useSetState
管理 object 型別 state 的 Hooks，用法與 class 組件的 this.setState 基本一致，
先來了解一下可變資料和不可變資料的含義和區別如下：
- 可變資料(mutable)即一個資料被創建之后，可以隨時進行修改，修改之后會影響到原值，
- 不可變資料(Immutable) 就是一旦創建，就不能再被更改的資料，對
Immutable物件的任何修改或添加洗掉操作都會回傳一個新的Immutable物件，
我們知道，React Function Components 中的 State 是不可變資料，所以我們經常需要寫類似如下的代碼：
setObj((prev) => ({
...prev,
name: 'Gopal',
others: {
...prev.others,
age: '27',
}
}));
通過 useSetState，可以省去物件擴展運算子操作這個步驟，即：
setObj((prev) => ({
name: 'Gopal',
others: {
age: '27',
}
}));
其內部實作也比較簡單，如下所示：
- 呼叫設定值方法的時候，會根據傳入的值是否為函式，如果是函式，則入參為舊狀態，輸出新的狀態，否則直接作為新狀態，這個符合 setState 的使用方法，
- 使用物件拓展運算子，回傳新的物件，保證原有資料不可變，
const useSetState = <S extends Record<string, any>>(
initialState: S | (() => S),
): [S, SetState<S>] => {
const [state, setState] = useState<S>(initialState);
// 合并操作，并回傳一個全新的值
const setMergeState = useCallback((patch) => {
setState((prevState) => {
// 新狀態
const newState = isFunction(patch) ? patch(prevState) : patch;
// 也可以通過類似 Object.assign 的方式合并
// 物件拓展運算子，回傳新的物件，保證原有資料不可變
return newState ? { ...prevState, ...newState } : prevState;
});
}, []);
return [state, setMergeState];
};
可以看到，其實就是將物件拓展運算子的操作封裝到內部，
還有其他更優雅的方式？我們可以使用 use-immer
useImmer(initialState)非常類似于useState，該函式回傳一個元組，元組的第一個值是當前狀態，第二個是updater函式，它接受一個immer producer函式或一個值作為引數，
使用如下：
const [person, updatePerson] = useImmer({
name: "Michel",
age: 33
});
function updateName(name) {
updatePerson(draft => {
draft.name = name;
});
}
function becomeOlder() {
updatePerson(draft => {
draft.age++;
});
}
當向更新函式傳遞一個函式的時候，draft 引數可以自由地改變，直到 producer 函式結束，所做的改變將是不可變的，并成為下一個狀態，這更符合我們的使用習慣，可以通過 draft.xx.yy 的方式更新我們物件的值，
useBoolean 和 useToggle
這兩個都是特殊情況下的值管理，
useBoolean，優雅的管理 boolean 狀態的 Hook，
useToggle，用于在兩個狀態值間切換的 Hook，
實際上，useBoolean 又是 useToggle 的一個特殊使用場景，
先看 useToggle，
- 這里使用了 typescript 函式多載宣告入參和出參型別，根據不同的入參會回傳不同的結果，比如第一個入參為 boolean 布林值，則回傳一個元組，第一項為 boolean 值，第二個為更新函式，優先級從上到下依次變低，
- 入參可能有兩個值，第一個為默認值（認為是左值），第二個是取反之后的值（認為是右值），可以不傳，不傳的時候，則直接根據默認值取反
!defaultValue， - toggle 函式，切換值，也就是上面的左值和右值的轉換，
- set，直接設定值，
- setLeft，設定默認值（左值），
- setRight，如果傳入了 reverseValue, 則設定為 reverseValue， 否則設定為 defautValue 的取反值，
// TS 函式多載的使用
function useToggle<T = boolean>(): [boolean, Actions<T>];
function useToggle<T>(defaultValue: T): [T, Actions<T>];
function useToggle<T, U>(defaultValue: T, reverseValue: U): [T | U, Actions<T | U>];
function useToggle<D, R>(
// 默認值
defaultValue: D = false as unknown as D,
// 取反
reverseValue?: R,
) {
const [state, setState] = useState<D | R>(defaultValue);
const actions = useMemo(() => {
const reverseValueOrigin = (reverseValue =https://www.cnblogs.com/gopal/archive/2022/08/23/== undefined ? !defaultValue : reverseValue) as D | R;
// 切換 state
const toggle = () => setState((s) => (s === defaultValue ? reverseValueOrigin : defaultValue));
// 修改 state
const set = (value: D | R) => setState(value);
// 設定為 defaultValue
const setLeft = () => setState(defaultValue);
// 如果傳入了 reverseValue, 則設定為 reverseValue， 否則設定為 defautValue 的反值
const setRight = () => setState(reverseValueOrigin);
return {
toggle,
set,
setLeft,
setRight,
};
// useToggle ignore value change
// }, [defaultValue, reverseValue]);
}, []);
return [state, actions];
}
而 useBoolean 是對 useToggle 的一個使用，如下，比較簡單，不細說
export default function useBoolean(defaultValue = https://www.cnblogs.com/gopal/archive/2022/08/23/false): [boolean, Actions] {
const [state, { toggle, set }] = useToggle(defaultValue);
const actions: Actions = useMemo(() => {
const setTrue = () => set(true);
const setFalse = () => set(false);
return {
toggle,
set: (v) => set(!!v),
setTrue,
setFalse,
};
}, []);
return [state, actions];
}
usePrevious
保存上一次狀態的 Hook，
其原理，是每次狀態變更的時候，比較值有沒有發生變化，變更狀態：
- 維護兩個狀態 prevRef（保存上一次的狀態）和 curRef（保存當前狀態），
- 狀態變更的時候，使用 shouldUpdate 判斷是否發生變化，默認通過
Object.is判斷，開發者可以自定義 shouldUpdate 函式，并決定什么時候記錄上一次狀態， - 狀態發生變化，更新 prevRef 的值為上一個 curRef，并更新 curRef 為當前的狀態，
const defaultShouldUpdate = <T>(a?: T, b?: T) => !Object.is(a, b);
function usePrevious<T>(
state: T,
shouldUpdate: ShouldUpdateFunc<T> = defaultShouldUpdate,
): T | undefined {
// 使用了 useRef 的特性，一直保持參考不變
// 保存上一次值
const prevRef = useRef<T>();
// 當前值
const curRef = useRef<T>();
// 自定義是否更新上一次的值
if (shouldUpdate(curRef.current, state)) {
prevRef.current = curRef.current;
curRef.current = state;
}
return prevRef.current;
}
useRafState
只在 requestAnimationFrame callback 時更新 state，一般用于性能優化，
window.requestAnimationFrame() 告訴瀏覽器——你希望執行一個影片，并且要求瀏覽器在下次重繪之前呼叫指定的回呼函式更新影片，該方法需要傳入一個回呼函式作為引數，該回呼函式會在瀏覽器下一次重繪之前執行，
假如你的操作是比較頻繁的，就可以通過這個 hook 進行性能優化，
- 重點看 setRafState 方法，它執行的時候，會取消上一次的 setRafState 操作，重新通過 requestAnimationFrame 去控制 setState 的執行時機，
- 另外在頁面卸載的時候，會直接取消操作，避免記憶體泄露，
function useRafState<S>(initialState?: S | (() => S)) {
const ref = useRef(0);
const [state, setState] = useState(initialState);
const setRafState = useCallback((value: S | ((prevState: S) => S)) => {
cancelAnimationFrame(ref.current);
ref.current = requestAnimationFrame(() => {
setState(value);
});
}, []);
// unMount 的時候，去除監聽
useUnmount(() => {
cancelAnimationFrame(ref.current);
});
return [state, setRafState] as const;
}
useSafeState
用法與 React.useState 完全一樣，但是在組件卸載后異步回呼內的 setState 不再執行，避免因組件卸載后更新狀態而導致的記憶體泄漏，
代碼如下：
- 在更新的時候，通過 useUnmountedRef 判斷如果組件卸載，則停止更新，
function useSafeState<S>(initialState?: S | (() => S)) {
// 判斷是否卸載
const unmountedRef = useUnmountedRef();
const [state, setState] = useState(initialState);
const setCurrentState = useCallback((currentState) => {
// 如果組件卸載，則停止更新
if (unmountedRef.current) return;
setState(currentState);
}, []);
return [state, setCurrentState] as const;
}
useUnmountedRef 這個我們之前提過，簡單回顧下，其實就是在 hook 的回傳值中標記組件為已卸載，
const useUnmountedRef = () => {
const unmountedRef = useRef(false);
useEffect(() => {
unmountedRef.current = false;
// 如果已經卸載，則會執行 return 中的邏輯
return () => {
unmountedRef.current = true;
};
}, []);
return unmountedRef;
};
useGetState
給 React.useState 增加了一個 getter 方法，以獲取當前最新值，
其實作如下：
- 其實就是通過 useRef 記錄最新的 state 的值，并暴露一個 getState 方法獲取到最新的，
function useGetState<S>(initialState?: S) {
const [state, setState] = useState(initialState);
// useRef 回傳一個可變的 ref 物件，其 .current 屬性被初始化為傳入的引數（initialValue），回傳的 ref 物件在組件的整個生命周期內持續存在，
// 使用 useRef 處理 state
const stateRef = useRef(state);
stateRef.current = state;
const getState = useCallback(() => stateRef.current, []);
return [state, setState, getState];
}
這在某一些情況下，可以避免 React 的閉包陷阱，如官網例子：
const [count, setCount, getCount] = useGetState<number>(0);
useEffect(() => {
const interval = setInterval(() => {
console.log('interval count', getCount());
}, 3000);
return () => {
clearInterval(interval);
};
}, []);
假如這里不使用 getCount()，而是直接使用 count，是獲取不到最新的值的，
總結與思考
React 的 function Component 的狀態管理還是比較靈活，我們可以針對一些場景進行封裝和優化，從而更優雅的管理我們的 state 狀態，希望 ahooks 這些封裝能對你有所幫助，
本文已收錄到個人博客中，歡迎關注~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502599.html
標籤：其他