自动化的hook

原创已于 2022-07-20 00:55:37 修改 · 292 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs

于 2022-07-20 00:40:22 首次发布

这篇博客通过比喻将React Hooks中的useStorage与步枪类型相联系，介绍了如何利用Hooks管理浏览器存储。从半自动化步枪（基础版useStorage）到全自动化步枪（工厂化useStorage），详细展示了代码的优化过程。博客还提供了一些示例代码，演示了如何在React应用中使用这些定制的Hooks。文章最后邀请读者评价，暗示内容深入且实用。

先科普一下，什么是步枪？

就是一把枪！又分半自动化步枪和全自动化步枪。

半自动步枪其实是自动装填，手动击发，说白了就是扣一次扳机打一发子弹。[图-M1卡宾枪]
全自动化步枪其实是自动装填，自动击发，只要扣住扳机子弹就不断发射。[图-AK47]

注意：98K是拉大栓的，还不算半自动呢~
拿前端持久之浏览器存储技术，来写个hook不正确比拟为步枪，这样确实足够抽象，不过威力还是不容小觑，下面就来突突突~

半自动化步枪~

import { useState, useCallback } from 'react'
const useStorage = (key, defaultValue) => {
    const storage = false ? window.localStorage : window.sessionStorage
    const getStorageValue = () => {
        try {
            return defaultValue || storage.getItem(key)
        } catch (err) {
            console.log(err)
        }
        return undefined
    }
    const [value, setValue] = useState(getStorageValue())
    const setStorageValue = useCallback((value) => {
        storage.setItem(key, value)
        setValue(() => {
            return value
        })
    })
    return [value, setStorageValue]
}

export default useStorage

改良版，还是半自动化步枪（就是轻了一点）~

import { useState, useEffect } from 'react'
const useStorage = (key, defaultValue) => {
    const storage = false ? window.localStorage : window.sessionStorage
    const [value, setValue] = useState(
        defaultValue || storage.getItem(key)
    )
    useEffect(() => {
        storage.setItem(key, value)
    }, [key, value])
    return [value, setValue]
}

export default useStorage

这个半自动化步枪，怎么使用呢?

const [id, setId] = useStorage('key', value)

那到底什么是加强版滴~ 全自动化步枪呢？首先，工厂化！

import { useState, useEffect, useCallback, useMemo } from "react";
const useStorage = (key, defaultValue) => {
    const storage = false ? window.localStorage : window.sessionStorage
    const [arg, setArg] = useState({ key: key, value: JSON.parse(defaultValue || storage.getItem(key)) })
    const setStorage = useCallback((key, value) => {
        storage.setItem(key, JSON.stringify(value))
        setArg({ key, value })
    })
    const getStorage = useMemo(key => storage.getItem(key))
    const clearStorage = useCallback(key => {
        storage.removeItem(key)
        setArg(undefined)
    })
    useEffect(() => {
        arg.key && setStorage(arg.key, arg.value)
    }, [arg.key, arg.value])
    return { setStorage, getStorage, clearStorage }
}

export default useStorage

简单易用

const { setStorage, getStorage, clearStorage } = useStorage()

来自业界人士的评分：
在这里插入图片描述
卷子满分60，让我们赴一场满分的约！