跨组件更新React配置

Question

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

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秒轮询一次，这似乎是一个糟糕的解决方案。

Answer 1

您可以使用React context API实现这一点：从父组件加载设置，并使用context Provider和useContext hook将其传递给子组件。

我创建了一个示例，它从子对象更新配置，并导致父对象和其他子对象重新渲染。