全局状态的 `createContext()` 和 `createSignal()` 之间的区别

Question

在 solid-js 中，使用 context, when we can create a signal 并将其导入为 getter/setter/even 来自存储全局存储文件的记忆值有什么好处？:

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

据我了解，在多个组件中导入此 value 是完全可以的，并且反应性将在整个组件中保持不变。

我能想到的 store/global 的唯一用例是，如果您的状态变得如此复杂，那么您需要一种更加结构化的类似上下文的方法来提高可维护性、可读性等。

Answer 1

上下文的好处是能够将状态绑定到组件树。假设您有一个要重复使用的单选按钮组。全局状态意味着您只能在页面中使用它一次，以免下一次使用会覆盖上一次 - 将状态与具有上下文的组件绑定将使这项任务变得容易得多。

Answer 2

Solid 中的上下文是一个包裹其子范围的范围。上下文的主要好处是您可以 re-write 组件树的不同级别的上下文值。换句话说，你可以在不同的上下文中同时拥有不同的值。

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

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 style="color: green;">Child Component</div>
</div>

全局状态的 `createContext()` 和 `createSignal()` 之间的区别

Difference between `createContext()` and `createSignal()` for global state

solid-js