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

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

---

代码示例：

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

Answer 2

只是分享我在使用 TypeScript 时的典型设置，以完成上面@tiomno 的回答，因为我认为许多最终来到这里的谷歌人实际上都在寻找这个：

interface GridItemContextType {
    /** Unique id of the item */
    i: string;
}
const GridItemContext = React.createContext<GridItemContextType | undefined>(
    undefined
);

export const useGridItemContext = () => {
    const gridItemContext = useContext(GridItemContext);
    if (!gridItemContext)
        throw new Error(
            'No GridItemContext.Provider found when calling useGridItemContext.'
        );
    return gridItemContext;
};

钩子在这种情况下提供了更安全的输入。 undefineddefaultValue 可防止您忘记设置提供程序。

Answer 3

我的两分钱：

像往常一样阅读 Kent C. Dodds 的this instructive article 后:)，我了解到当你解构 useContext 返回的值时，defaultValue 很有用：

在代码库的一角定义上下文，不使用 defaultValue：

const CountStateContext = React.createContext() // <-- define the context in one corner of the codebase without defaultValue

并在组件中像这样使用它：

const { count } = React.useContext(CountStateContext)

JS 显然会说TypeError: Cannot read property 'count' of undefined

但你不能这样做，完全避免使用 defaultValue。

关于测试，我的肯特老师说得很好：

React 文档建议提供默认值“可能会有所帮助 在不包装组件的情况下单独测试组件。”虽然它是 确实它允许你这样做，我不同意它比 用必要的上下文包装你的组件。请记住 每次你在你的测试中做了一些你在你的测试中没有做的事情 应用程序，您降低了测试可以提供的置信度 你。

TypeScript 的额外功能;如果您不想使用 defaultValue，可以通过以下操作轻松取悦 lint：

const MyFancyContext = React.createContext<MyFancyType | undefined>(undefined)

您只需要确保稍后添加额外的验证，以确保您已经涵盖了 MyFancyContext === undefined 时的情况

• MyFancyContext ?? '默认'
• MyFancyContext?.notThatFancyProperty

等

Answer 4

您可以使用 useReducer 钩子设置默认值，然后第二个参数将是默认值：

import React, { createContext, useReducer } from "react";
import { yourReducer } from "./yourReducer";

export const WidgetContext = createContext();

const ContextProvider = (props) => {

  const { children , defaultValues } = props;
 
  const [state, dispatch] = useReducer(yourReducer, defaultValues);

  return (
    <WidgetContext.Provider value={{ state, dispatch }}>
      {children}
    </WidgetContext.Provider>
  );
};

export default ContextProvider;

// 实现

   <ContextProvider
                  defaultValues={{
                    disabled: false,
                    icon: undefined,
                    text: "Hello",
                    badge: "100k",
                    styletype: "primary",
                    dir: "ltr",
                    }}
                >
    </ContextProvider>