javascript - React.createContext点defaultValue？

Question

关于React 16 Context doc page ，他们有看起来类似于这个的例子:

const defaultValue = 'light'
const SomeContext = React.createContext(defaultValue)

const startingValue = 'light'
const App = () => (
  <SomeContext.Provider theme={startingValue}>
    Content
  </SomeContext.Provider>
)

似乎 defaultValue 是无用的，因为如果您将 startingValue 设置为任何其他值或不设置它(这是 undefined)，它会覆盖它。没关系，它应该这样做。

但是 defaultValue 的意义何在？

如果我想要一个不会改变的静态上下文，那么能够执行类似下面的操作会很好，并且只需通过 defaultValue 传递 Provider 即可

const App = () => (
  <SomeContext.Provider>
    Content
  </SomeContext.Provider>
)

Answer 1

当没有 Provider 时，defaultValue 参数用于函数 createContext。这有助于在不包装组件的情况下单独测试组件，或使用提供者的不同值对其进行测试。

---

代码示例:

import { createContext, useContext } from "react";

const Context = createContext( "Default Value" );

function Child() {
  const context = useContext(Context);
  return <h2>Child1: {context}</h2>;
}

function Child2() {
  const context = useContext(Context);
  return <h2>Child2: {context}</h2>;
}

function App() {

  return (
    <>
      <Context.Provider value={ "Initial Value" }>
        <Child /> {/* Child inside Provider will get "Initial Value" */}
      </Context.Provider>
        <Child2 /> {/* Child outside Provider will get "Default Value" */}
    </>
  );
}

Codesandbox Demo