useGlobalState

状态在多组件传递

通常是:

• 第三方库
• context
• props 传递

还可以手撸一个 useGlobalState

useGlobalState

使用 react17 实现

import { useState, useEffect, useCallback } from 'react';

export function createState(initialValue) {
    return {
        listeners: [],
        state: initialValue,
    };
}

export function useGlobalState(config) {
    const [state, _setState] = useState(config.state);
    const setState = useCallback(stateOrSetter => {
        let next = stateOrSetter;
        if (typeof stateOrSetter === 'function') {
            next = stateOrSetter(config.state);
        }
        config.listeners.forEach(l => l(next));
        config.state = next;
    }, []);

    useEffect(() => {
        // Register the observer
        const listener = state => _setState(state);
        config.listeners.push(listener);

        // Cleanup when unmounting
        return () => {
            const index = config.listeners.indexOf(listener);
            config.listeners.splice(index, 1);
        };
    }, []);

    return [state, setState];
}

使用:

const COUNT = createState(0);

const [count, setCount] = useGlobalState(COUNT);

使用 react 18 实现

import { useCallback, useSyncExternalStore } from 'react';

export function createState(initialValue) {
    return {
        listeners: [],
        state: initialValue,
    };
}

export function useGlobalState(config) {
    const setState = useCallback(stateOrSetter => {
        let next = stateOrSetter;
        if (typeof stateOrSetter === 'function') {
            next = stateOrSetter(config.state);
        }
        config.state = next;
        config.listeners.forEach(l => l());
    }, []);

    const state = useSyncExternalStore(
        (listener) => {
            config.listeners.push(listener);
            return () => config.listeners.filter(l => l !== listener);
        },
        () => {
            return config.state;
        },
    );
    return [state, setState];
}

使用:

const COUNT = createState(0);

const [count, setCount] = useGlobalState(COUNT);