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

Question

在solid-js中，当我们可以创建一个信号并导入它的getter/setter/甚至是来自存储全局存储类文件的记忆值时，使用context有什么好处？：

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

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

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

Answer 1

Solid 中的上下文是一个包装其子作用域的作用域对象。上下文的主要好处是您可以在组件树的不同级别重写上下文值。换句话说，你可以同时在不同的环境中拥有不同的价值观。

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

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>

Answer 2

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