createContext

Context 在 Solid 中提供了一种依赖注入的形式。 它用于避免需要通过中间组件传递数据作为 props（又称props 钻取）。 这个函数创建一个新的 context 对象，可以与 useContext 一起使用，并提供 Provider 控制流。 当层级结构中上方没有找到 Provider 时，将使用默认 Context。

用法

为了避免在热模块替换（HMR）发生时重新实例化新的 context，建议在独立的模块（文件）中使用 createContext。

例如：

import { createContext } from "solid-js";

export const DEFAULT_COUNT = 0
const INTIAL_STORE_SETTER = {
  increment: () => void,
  decrement: () => void
};

export const CounterContext = createContext([
  { count: INITIAL_COUNT },
  INTIAL_STORE_SETTER
]);

在独立模块中创建 context 后，你可以用它来实例化 context provider。

import { createStore } from 'solid-js/store';
import { CounterContext, DEFAULT_COUNT } from "./counter.ts";

export function CounterProvider(props) {
    const [value, setValue] = createStore({ count: props.initialCount || DEFAULT_COUNT })

  const counter = [
        value,
        {
            increment() {
                setValue("count", currentCount => currentCount + 1)
            },
            decrement() {
                setValue("count", currentcount => currentCount - 1)
            },
        },
    ]

    return (
        <CounterContext.Provider value={counter}>
            {props.children}
        </CounterContext.Provider>
    )
}

关于如何通过 context API 传递数据的几个重要注意事项：

• 传递给 provider 的值会原样传递给 useContext。
• 包装为响应式表达式将不起作用。
• 你应该直接传入 Signals 和 Stores，而不是在 JSX 中访问它们。

要了解如何使用 context，请查看 useContext 文档和 Context 概念条目。

默认值

createContext() 接受一个可选的"默认值"作为参数。 如果调用 useContext 时，在组件层级结构中它上面没有对应的 context provider，则返回作为 defaultValue 传入的值。

但是，如果没有传入 defaultValue，则在这种情况下返回 undefined。 另外，如果在事件回调中调用 useContext，由于它在组件层级结构之外，也会返回 defaultValue（或 undefined）。

这对 TS 有影响。 如果没有传入 defaultValue，那么 useContext() 可能会返回 undefined，类型也会反映这一点。

另一种方法（在上一节的示例中使用）是为 createContext() 提供默认值。 在这种情况下，useContext() 将始终返回一个值，因此 TS 也不会报错。 这种方法的陷阱是，如果你_无意中_在 provider 外部使用 useContext，可能不会立即发现，因为 context 仍在提供有效值。 因此，如果你期望始终在 provider 内使用 useContext，最好使用上述基于错误的方法。

类型签名

interface Context<T> {
  id: symbol
  Provider: (props: { value: T; children: any }) => any
  defaultValue: T
}

function createContext<T>(defaultValue?: T): Context<T | undefined>