Uselocstate NPM

useLocState

这是一个小到甚至可以直接复制到你项目中用来代替useState 的项目

特性

状态持久化状态分离存储在localStorage中

原理其实很简单每个状态其实都是一个useState 只是做了些小改动

状态会有一个副本合集存在一个js对象中这个副本只是用来记录不会导致组件更新

每一次setState 都是改变原有的useState中的数据

每一次读取如果localStorage中有数据则返回localStorage中的数据如果没有则是从副本中读取

基于这一特性每次父组件更新状态子组件们都会重新读取localStorage的状态所以甚至可以做一个局部的状态管理但是不太推荐

设计的初衷只是为了方便一些需要状态持久化的场景

先来看看数据持久化

最常见的控制数字加减

const Count = () => {
    const [count, setCount] = useLocState('count', 0)

    return (
        <div className={styles.box1} >
            <div onClick={e => {setCount(count - 1)}}>-</div>
            <input
                type="number"
                value={count}
                onChange={e => {
                    setCount(+e.target.value)

                }} />
            <div onClick={e => {setCount(count + 1)}}>+</div>
        </div>
    )
}

状态正常并存储在本地

刷新页面试试

Kapture 2023-02-09 at 02 55 53

数据依旧存在

来看看设计前意料之外的局部状态管理(我承认这在某种方面算是一个bug 但是貌似提供了便利所以就保留了下来)

功能依旧是数字加减但是多了一个状态记录加减的操作记录并且导入了一个子组件

const Count2 = () => {
    const [count, setCount] = useLocState('count', 0)
    const [countlist, setCountList] = useLocState<number[]>('countlist', [])
    return (
        <>
            <CountHistory />
            <div className={styles.box1} >

                <div onClick={e => {
                    setCount(count - 1)
                    setCountList([...countlist, count])
                }}>-</div>
                <input
                    type="number"
                    value={count}
                    onChange={e => {
                        setCount(+e.target.value)

                    }} />
                <div onClick={e => {
                    setCount(count + 1)
                    setCountList([...countlist, count])
                }}>+</div>
            </div>
        </>

    )


//子组件不接受任何props 只是读取localStorage中的数据  
const CountHistory = () => {
    const countlist:number[] = useLocValue("countlist");
    const ref:any = useRef(null);
    useEffect(()=>{
        ref.current.scrollTop = ref.current.scrollHeight;
    })
    return (
        <div ref={ref} className={styles.box2} >
            {
                countlist?.map((item, index) => {
                    return (
                        <div key={index}>{item}</div>
                    )
                })
            }
        </div>
    )
}

Kapture 2023-02-09 at 04 03 08