持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第12天，点击查看活动详情

context

Solid除了props和store可以跨组件通信之外，还可以使用Context来传递数据。使用Context的好处是创建的Context是响应式系统的一部分创建并由之管理。

第一步，我们创建一个Context对象。该对象包含一个用于注入数据的Provider组件。但是通常的做法是将Provider和useContext消费者与已经为Context设置的数据封装在一起。

要使用Context，我们需要使用CounterProvider组件包含App组件以在全局范围内注入Context。并在设置初始计数值为1.

如：

render(() => ( <CounterProvider count={1}> <App /> </CounterProvider> ), document.getElementById("app"));

其次，我们在另外的组件需要使用封装好的useCounter()消费者来获取全局注入的数据。如：

const [count, { increment, decrement }] = useCounter(); return ( <> <div>{count()}</div> <button onClick={increment}>+</button> <button onClick={decrement}>-</button> </> );

不使用Context

Context适合用来做数据存储。Context处理注入，将所有权与响应图联系起来，自动管理销毁，并且依据于Solid的细粒度渲染，没有任何的开销。但是也可以直接将响应式系统用于简单的场景。可写的Store就是一个Signal。 如：

import { createSignal } from 'solid-js'; export default createSignal(0); // 别的地方的代码 import counter from './counter'; const [count, setCount] = counter;

Solid的响应式是一个普遍的概念。它跟内部组件还是外部的组件都没有关系。唯一的限制是所有计算（Effect/Memo）都需要在响应顶层即creatRoot下创建。solid的render会自动执行此操作。

如：

import { createSignal, createMemo, createRoot } from "solid-js";

function createCounter() {
  const [count, setCount] = createSignal(0);
  const increment = () => setCount(count() + 1);
  const doubleCount = createMemo(() => count() * 2);
  return { count, doubleCount, increment };
}

export default createRoot(createCounter);

所以当你使用包含计算的复杂全局Store时，一定要调用createRoot。或者更好的选择是出于为了方便使用Context。