reactjs - React Context 的范围是什么？

Question

我不清楚在哪里 Context可以在 React 应用程序中创建。我可以在组件树的任何地方创建上下文吗？如果可以，该上下文是否只限于创建它的子级？还是 Context 本质上是全局性的？
在文档中的哪里可以找到这个？
案例:我在一个页面上多次重用一个组件，并希望使用上下文来处理子组件的数据，但该上下文需要对每个子树都是唯一的。

Answer 1

有两个不同的东西:上下文对象和上下文提供者。
上下文对象在全局范围内创建一次(具有可选的默认值，如果没有从组件父级传递提供者，则该值是全局的):

const FontContext = createContext('Courier');

虽然上下文提供者实际上传递了它自己对上下文的本地覆盖，这仅适用于其子级:

<FontContext.Provider value='Consolas'>
  {children}
</FontContext.Provider>

有趣的部分是上下文级联:

<>
  <MyFontConsumer /> // value is 'Courier', the default
  <FontContext.Provider value='Consolas'>
    <MyFontConsumer /> // value is 'Consolas'
    <FontContext.Provider value='TimesRoman'>
      <MyFontConsumer /> // value is 'TimesRoman'
    </FontContext.Provider>
    <MyFontConsumer /> // value is 'Consolas'
  </FontContext.Provider>
</>

要使用组件中的上下文，您可以使用 useContext()钩子(Hook)，(您可以使用特殊的 <FontContext.Consumer> 组件或 MyClassComponent.contextType 代替)它要求您传递相同的对象。
我避免传递上下文对象的首选方法是将它们全部保存在同一个组件中并导出自定义钩子(Hook):

const FontContext = createContext('Courier')

export function FontProvider({value, children}) {
  return <FontContext.Provider value={value}>
    {children}
  </FontContext.Provider>
}

export function useFont() {
  return useContext(FontContext)
}

现在您可以在组件中使用它:

import {FontProvider, useFont} from './FontProvider'

function App() {
  const font = useFont() // value is 'Courier', the default

   return <FontProvider value='TimesRoman'>
      <MyChild />
   </FontProvider>
}

function MyChild() {
  const font = useFont() // value is 'TimesRoman'
  ...
}