大家都能看得懂的源码|大家都能看得懂的源码 - ahooks 这些 hook 更优雅管理你的状态
【大家都能看得懂的源码|大家都能看得懂的源码 - ahooks 这些 hook 更优雅管理你的状态】本文是深入浅出 ahooks 源码系列文章的第十二篇,该系列已整理成文档-地址。觉得还不错,给个 star 支持一下哈,Thanks。
今天我们来聊聊 ahooks 中那些可以帮助我们更优雅管理我们 state(状态)的那些 hook。一些比较特殊的,比如 cookie/localStorage/sessionStorage,useUrlState等,我们已经单独拿出来细讲了,感兴趣可以看看笔者的历史文章。
useSetState
管理 object 类型 state 的 Hooks,用法与 class 组件的 this.setState 基本一致。先来了解一下可变数据和不可变数据的含义和区别如下:
- 可变数据(mutable)即一个数据被创建之后,可以随时进行修改,修改之后会影响到原值。
- 不可变数据(Immutable) 就是一旦创建,就不能再被更改的数据。对
Immutable
对象的任何修改或添加删除操作都会返回一个新的Immutable
对象。
setObj((prev) => ({
...prev,
name: 'Gopal',
others: {
...prev.others,
age: '27',
}
}));
通过 useSetState,可以省去对象扩展运算符操作这个步骤,即:
setObj((prev) => ({
name: 'Gopal',
others: {
age: '27',
}
}));
其内部实现也比较简单,如下所示:
- 调用设置值方法的时候,会根据传入的值是否为函数。如果是函数,则入参为旧状态,输出新的状态。否则直接作为新状态。这个符合 setState 的使用方法。
- 使用对象拓展运算符,返回新的对象,保证原有数据不可变。
const useSetState = >(
initialState: S | (() => S),
): [S, SetState] => {
const [state, setState] = useState(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。实际上,useBoolean 又是 useToggle 的一个特殊使用场景。
useToggle,用于在两个状态值间切换的 Hook。
先看 useToggle。
- 这里使用了 typescript 函数重载声明入参和出参类型,根据不同的入参会返回不同的结果。比如第一个入参为 boolean 布尔值,则返回一个元组,第一项为 boolean 值,第二个为更新函数。优先级从上到下依次变低。
- 入参可能有两个值,第一个为默认值(认为是左值),第二个是取反之后的值(认为是右值),可以不传,不传的时候,则直接根据默认值取反
!defaultValue
。 - toggle 函数。切换值,也就是上面的左值和右值的转换。
- set。直接设置值。
- setLeft。设置默认值(左值)。
- setRight。如果传入了 reverseValue, 则设置为 reverseValue。 否则设置为 defautValue 的取反值。
// TS 函数重载的使用
function useToggle(): [boolean, Actions];
function useToggle(defaultValue: T): [T, Actions];
function useToggle(defaultValue: T, reverseValue: U): [T | U, Actions];
function useToggle(
// 默认值
defaultValue: D = false as unknown as D,
// 取反
reverseValue?: R,
) {
const [state, setState] = useState(defaultValue);
const actions = useMemo(() => {
const reverseValueOrigin = (reverseValue =https://www.it610.com/article/== 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.it610.com/article/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 = (a?: T, b?: T) => !Object.is(a, b);
function usePrevious(
state: T,
shouldUpdate: ShouldUpdateFunc = defaultShouldUpdate,
): T | undefined {
// 使用了 useRef 的特性,一直保持引用不变
// 保存上一次值
const prevRef = useRef();
// 当前值
const curRef = useRef();
// 自定义是否更新上一次的值
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(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(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(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(0);
useEffect(() => {
const interval = setInterval(() => {
console.log('interval count', getCount());
}, 3000);
return () => {
clearInterval(interval);
};
}, []);
假如这里不使用 getCount(),而是直接使用 count,是获取不到最新的值的。
总结与思考 React 的 function Component 的状态管理还是比较灵活,我们可以针对一些场景进行封装和优化,从而更优雅的管理我们的 state 状态,希望 ahooks 这些封装能对你有所帮助。
本文已收录到个人博客中,欢迎关注~
推荐阅读
- HTTPS|HTTPS 一定是安全的吗()
- C语言实现学生考勤系统
- 妙啊!纯|妙啊!纯 CSS 实现拼图游戏
- 基于Qt的TCP实现通信
- 8月更新|8月更新 | Java on Azure Tooling
- 日精进136天
- Databend|Databend v0.8 新版本上线!
- C语言实现飞机游戏(2)
- SSH连接服务器后执行多条命令
- 不是人人都能上北大,但是几乎人人吃猪肉