你好,社区
我终于厌倦了使用Context API和其他库,决定自己想办法来控制我的Web应用程序的全局状态。
这是我现在所拥有的,似乎工作得很好。
我希望我能得到一些反馈或建议,了解使用这种实现的问题所在。
谢谢大家
import { useState, Dispatch, SetStateAction, useEffect, useId } from "react";
type Setter<T> = Dispatch<SetStateAction<T>> | ((value: T) => void)
/**
* Create a pod with default value
* @param value
* @returns usePod, value, updater
*/
export function createPod<T>(value: T) {
const pod = {
value: value
};
const setters: { [key in string]: Setter<T> } = {};
const updater = (value: T) => {
pod.value = value;
for (let key in setters) {
if (!setters.hasOwnProperty(key)) return;
setters[key](value);
}
}
const usePod = () => {
const [value, setValue] = useState(pod.value);
const key = useId()
useEffect(() => {
setters[key] = setValue;
return () => {
delete setters[key];
}
}, [])
return [value, updater] as const
}
return [usePod, pod.value, updater] as const;
}