持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第22天，点击查看活动详情
今天开始一起学习分享 ahooks 的源码
ahooks是阿里巴巴出品的一套高质量可靠的 React Hooks 库
今天分享 第17个 hooks-useLocalStorageState
useLocalStorageState
useLocalStorageState 的作用是什么
useLocalStorageState 的作用是 将状态存储在 localStorage 中的 Hook 。
接下来 看下 API
API
interface Options<T> {
defaultValue?: T | (() => T);
serializer?: (value: T) => string;
deserializer?: (value: string) => T;
}
const [state, setState] = useLocalStorageState<T>(
key: string,
options: Options<T>
): [T?, (value?: T | ((previousState: T) => T)) => void];
Options
一共有3个参数
第1个参数 是defaultValue ，表示默认值
第2个参数是 serializer,表示自定义序列化方法
第3个参数是 deserializer，表示自定义反序列化方法
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| defaultValue | 默认值 | any | (() => any) | - |
| serializer | 自定义序列化方法 | (value: any) => string | JSON.stringify |
| deserializer | 自定义反序列化方法 | (value: string) => any | JSON.parse |
备注
useLocalStorageState 在往 localStorage 写入数据前，会先调用一次 serializer，在读取数据之后，会先调用一次 deserializer。
接下来 看下 用法
将 state 存储在 localStorage 中
刷新页面后，可以看到输入框中的内容被从 localStorage 中恢复了
首先在输入框中输入值，这个值就会存在localstorage，当页面刷新的时候，会先从Localstorage获取值，有值则添加到输入框中。然后有两个方法，一个方法是reset，用来重置到上一个值，另外一个是clear，用来清除
import React from 'react';
import { useLocalStorageState } from 'ahooks';
export default function () {
const [message, setMessage] = useLocalStorageState<string | undefined>(
'use-local-storage-state-demo1',
{
defaultValue: 'Hello~',
},
);
return (
<>
<input
value={message || ''}
placeholder="Please enter some words..."
onChange={(e) => setMessage(e.target.value)}
/>
<button style={{ margin: '0 8px' }} type="button" onClick={() => setMessage('Hello~')}>
Reset
</button>
<button type="button" onClick={() => setMessage(undefined)}>
Clear
</button>
</>
);
}
这里有两个方法 reset和clear方法，可以重置和清除
接下来一起看下 源码
源码
1.代码看起来比较简单，这里使用createUseStorageState来执行一个函数，这个函数老判断是否是在浏览器中，如果是在浏览器中，则直接返回localstorage，否则的话，在直接返回undefined
const useLocalStorageState = createUseStorageState(() => (isBrowser ? localStorage : undefined));
2.接下来再看下 createUseStorageState 方法。核心逻辑是通过getStoredValue获取到Localstorage的值，存储到state中，然后再useUpdateEffect这个hooks中来更新localstorage的值
const [state, setState] = useState<T>(() => getStoredValue());
useUpdateEffect(() => {
setState(getStoredValue());
}, [key]);
