分享一个React Hook用于组件分享状态

76 阅读1分钟
const shares = {};

function getOrInitShare(name, createDataFun, componentId) {
    if (name in shares) {
        shares[name].listeners.add(componentId);
    } else {
        shares[name] = {data: createDataFun(), listeners: new Set([componentId])};
    }

    return shares[name].data;
}

export function useShare(name, cb) {
    const [componentId] = useSelf(`${new Date().valueOf()}-${Math.random()}`);
    const data = useMemo(() => {
        return getOrInitShare(name, cb, componentId);
    }, [name, componentId]);

    useEffect(() => {
        return () => {
            const shared = shares[name];
            shared.listeners.delete(componentId);

            if (shared.listeners.size === 0) {
                delete shares[name];
            }
        };
    }, [name, componentId]);

    return data;
}

使用同样shareId,将共享相同的对象。用于Mobx store非常方便。