Question

我所见过的每个关于React上下文的示例都像this：

theme-context.js

// Make sure the shape of the default value passed to
// createContext matches the shape that the consumers expect!
export const ThemeContext = React.createContext({
  theme: themes.dark,
  toggleTheme: () => {},
});

在拥有文件的位置包含上下文的实例。然后，您使用useContext(ThemeContext)将其传递到组件中。

我的问题是，如果您这样做并且总是一个单例，为什么不直接从单例中直接导入上下文中的内容呢？基本上，我想知道是否曾经有一段时间您创建多个上下文实例，例如对于测试，您可能为每个测试创建一个新实例。

Answer 1

首先，React.createContext({'light'})中的值是默认值。它主要用于调试或跳过它，并将其留空React.createContext()。用法示例：您的Context.Provider中有一个数据，但是不确定是否将其正确传递给Product.Consumer，所以如果弹出默认值，您就知道做错了。

在文献中，这种技术用于传递简单数据，例如单调React.createContext({'theme:themes.dark'})。

在大多数情况下，您将使用Context.Provider和Context.Consumer，甚至通过this.context。

文档严格解释了每个详细信息，请尝试在文档中搜索Context.Provider, Class.contextType, Context.Consumer。

是React上下文应该总是单例，还是还有另一种方式？

1 个答案: