import { useMemo, useState } from "react"
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const useProxy = <T extends Record<string | symbol, any>>(state: T): T => {
const [value, setValue] = useState<T | undefined>()
const createProxy = (target: T): T => {
return new Proxy(target, {
get: Reflect.get,
set: (target, key: keyof T, value, reciver) => {
target[key] = value
setValue(createProxy(target))
return Reflect.set(target, key, value, reciver)
}
})
}
// eslint-disable-next-line react-hooks/exhaustive-deps
const initVlaue = useMemo(() => createProxy(state), [state])
return value ?? initVlaue
}
react 自动更新状态
本文介绍了一种使用JavaScriptProxy对React中的useState进行优化的方法,通过createProxy函数创建代理对象,实现在组件状态更新时的平滑过渡,提倡在某些场景下替换原生useState以提高代码效率。
摘要由CSDN通过智能技术生成