React.createContext的defaultValue点？

Question

在React 16 Context doc页面上,他们的示例看起来类似于:

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

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

Answer 1

只是分享我使用 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;
};

在这种情况下，该钩子提供了更安全的输入方式。这undefined defaultValue可以防止您忘记设置提供程序。

Answer 2

如果没有Provider,则defaultValue参数用于函数createContext.这有助于隔离测试组件而不包装它们,或者使用Provider中的不同值对其进行测试.

Answer 3

我的两分钱：

阅读这篇有指导意义的文章后像往常一样Kent C. Dodds的:) 后，我了解到当您解构 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。

关于考试，我的老师 Kent 说得很好：

React 文档建议提供默认值“有助于在不包装组件的情况下隔离测试组件。” 虽然它确实允许您这样做，但我不同意这比用必要的上下文包装组件更好。请记住，每次您在测试中做了一些您在应用程序中没有做的事情时，都会降低测试可以给您的信心。

额外的打字稿；如果您不想使用 defaultValue，可以通过执行以下操作轻松取悦 lint：

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

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

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

等等