useState 和 useReducer 是使 FunctionComponent 獲得狀態(tài)的2個hooks函數(shù)，我在初期的時候以為它們是2個完全不相干(各自獨立)的兩個函數(shù)實現(xiàn)逸雹，可是在逐步深入了解hooks的過程中我發(fā)現(xiàn)并不是這樣揣非，如果又跟我一樣想法同學記得給該篇文章點個贊??犬金。
官方對 useReducer 的定位
`useReducer` is usually preferable to `useState` when you have
complex state logic that involves multiple sub-values. It also lets you optimize
performance for components that trigger deep updates because you can pass
`dispatch` down instead of callbacks.
對于一個復雜邏輯且有嵌套的狀態(tài)來說，useReducer能帶來渲染性能的提升缔莲，畢竟一個action是會觸發(fā)兄弟結(jié)點的更新的，這對于用useState來實現(xiàn)是比較繁瑣的
初衷
記得某篇博客還是某面試集的題有表述悬秉，useState本身就是用useReducer實現(xiàn)的，意味著useState是useReducer的一個擴展子集冰蘑，且今天剛好對比了下 types文件和泌，如下
function useState<S>(initialState: S | (()=>S)):
[S,(value:S | ((prev:S)=>void))=>void]
function useReducer<R extends ReducerWithoutAction<any>, I>(
reducer: R,
initializerArg: I,
initializer: (arg: I) => ReducerStateWithoutAction<R>
): [ReducerStateWithoutAction<R>, DispatchWithoutAction];
從這里我們可以看出來useState用useReducer來實現(xiàn)的可行性
function useState<T>(initialState: T | (() => T)) {
const initState: T =
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
typeof initialState === 'function' ? initialState() : initialState;
const [state, dispatch] = React.useReducer(
// eslint-disable-next-line no-shadow
(state: T, action: T | ((prev: T) => T)) => {
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
return typeof action === 'function' ? action(state) : action;
},
initState,
);
return [
state,
(value: T | ((prev: T) => T)) => {
if (value !== state) {
dispatch(value);
}
},
];
}
