[react-hooks]|[react-hooks] 利用useReducer实现useState
useState 和 useReducer 是使 FunctionComponent 获得状态的2个hooks函数,我在初期的时候以为它们是2个完全不相干(各自独立)的两个函数实现,可是在逐步深入了解hooks的过程中我发现并不是这样,如果又跟我一样想法同学记得给该篇文章点个赞。
官方对 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.
对于一个复杂逻辑且有嵌套的状态来说,useReducer能带来渲染性能的提升,毕竟一个action是会触发兄弟结点的更新的,这对于用useState来实现是比较繁琐的
初衷
记得某篇博客还是某面试集的题有表述,useState本身就是用useReducer实现的,意味着useState是useReducer的一个扩展子集,且今天刚好对比了下 types文件,如下
function useState(initialState: S | (()=>S)):
[S,(value:S | ((prev:S)=>void))=>void]function useReducer(
reducer: R,
initializerArg: I,
initializer: (arg: I) => ReducerStateWithoutAction
): [ReducerStateWithoutAction, DispatchWithoutAction];
【[react-hooks]|[react-hooks] 利用useReducer实现useState】从这里我们可以看出来useState用useReducer来实现的可行性
function useState(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);
}
},
];
}
推荐阅读
- Spring|Spring Boot 自动配置的原理、核心注解以及利用自动配置实现了自定义 Starter 组件
- 【万伽复利】什么是复利(如何利用复利赚钱?)
- 苹果手机如何利用库乐队自制铃声
- “没有利用价值的人是很受冷遇的。”
- 可悲的好人
- 利用好你的暗时间,让成长无处不在
- 如何利用漏斗模型增加转化率减少流失率()
- 2018-12-05|2018-12-05 打卡第二十二天 想要利用业余时间培养爱好就得先做好时间管理
- 你是在利用时间还是在滥用时间【8】
- 如何优雅的利用工具—起床篇