跨组件更新 React 配置

如何解决跨组件更新 React 配置

我将客户端设置的配置设置存储在本地存储中。当有人更新一个值时，我们将其保存到本地存储。当他们加载页面时，我们从本地存储中获取它。粘性状态的代码是：

import React from 'react';

export default function useStickyState(key,defaultValue) {
    if (!process.browser) {
        return React.useState({})
    }

    const [value,setValue] = React.useState(() => {
        const stickyValue = window.localStorage.getItem(key);
        return stickyValue !== null
            ? JSON.parse(stickyValue)
            : defaultValue;
    });
    React.useEffect(() => {
        window.localStorage.setItem(key,JSON.stringify(value));
    },[key,value]);
    return [value,setValue];
}

使用这个，我可以很容易地制作一个设置系统：

import useStickyState from "./useStickyState";

export default function useSettings() {
    const [config,setConfig] = useStickyState('config',{
        shortLength: 4,password: '',expirationTime: 0,focus: 'usability'
    })

    return [config,setConfig]
}

然后，我可以使用以下方法访问设置：

    const [config,setConfig] = useSettings()

不过。我有多个使用这些设置的组件。当其中一个调用 setConfig() 时，我希望它们都更新。这可能吗？怎么做呢？

目前我能想到的唯一方法是每 x 秒轮询一次，这似乎是一个糟糕的解决方案。

解决方法

您可以使用 React context API 实现此目的：从父组件加载设置，并使用上下文提供程序和 useContext 挂钩将它们传递给子组件。

我创建了 an example 来更新子级的配置并导致父级和其他子级重新渲染。