`createContext（）和`createSignal（）`对于全局状态

发布于 2025-02-01 04:52:39 字数 501 浏览 3 评论 0原文

在SOLID-JS中，使用上下文 a href =“ https://www.solidjs.com/docs/latest#createsignal” rel =“ noreferrer”>信号并导入它是getter/setter/nes getter/setter/甚至是从商店类似的全球商店式文件中的回忆价值/ ？：

// ./store/myValue.js
export const [value, setValue] = createSignal('');

据我了解，在多个组件中导入此value完全可以，并且在整个过程中都可以保持反应性。

我能想到的商店/全局的唯一用例是，如果您的状态变得如此复杂，则您需要一种更结构化的上下文方法来提高可维护性，可读性等。

原文

In solid-js, what is the benefit of using context, when we can create a signal and import it's getter/setter/even a memoized value from a store global store-like file?:

// ./store/myValue.js
export const [value, setValue] = createSignal('');

To my understanding it is totally ok to import this value in multiple components and the reactivity would be maintained throughout those.

The only use-case of the store/global that I can think of, is if your state grows to such a complexity, that you need a more structured context-like approach to improve maintainability, readability etc.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

很酷又爱笑 2025-02-08 04:52:39

固体中的上下文是包裹其子范围的范围对象。上下文的主要好处是，您可以在组件树的不同级别上重写上下文值。换句话说，您可以同时在不同的上下文中具有不同的值。

在下面查看此示例。当您深入到组件树时，我们可以切换主题。全球商店将在每个级别为您提供相同的价值。

const ThemeContext = createContext<string>('black');

const Child = () => {
  const theme = useContext(ThemeContext);
  return (
    <div style={{ color: theme }}>Child Component</div>
  );
};

const App = () => {
  return (
    <div>
      <Child />
      <ThemeContext.Provider value='red'>
        <Child />
        <ThemeContext.Provider value='blue'>
          <Child />
        </ThemeContext.Provider>
      </ThemeContext.Provider>
    </div>
  );
}

render(App, document.querySelector('#app'));

这将输出：

<div>
  <div style="color: black;">Child Component</div>
  <div style="color: red;">Child Component</div>
  <div style="color: blue;">Child Component</div>
</div>

Context in Solid is a scoped object that wraps its child scopes. The main benefit of context is you can re-write a context value at different levels of the component tree. It other words, you can have different values in different contexts, all at the same time.

Check this example below. We can switch theme as you go deeper into the component tree. A global store will give you the same value at every level.

const ThemeContext = createContext<string>('black');

const Child = () => {
  const theme = useContext(ThemeContext);
  return (
    <div style={{ color: theme }}>Child Component</div>
  );
};

const App = () => {
  return (
    <div>
      <Child />
      <ThemeContext.Provider value='red'>
        <Child />
        <ThemeContext.Provider value='blue'>
          <Child />
        </ThemeContext.Provider>
      </ThemeContext.Provider>
    </div>
  );
}

render(App, document.querySelector('#app'));

This will output:

<div>
  <div style="color: black;">Child Component</div>
  <div style="color: red;">Child Component</div>
  <div style="color: blue;">Child Component</div>
</div>

回复收藏 0 原文