reactjs - useContext 到底做了什么？

Question

我对 React 非常着迷，但我遇到了一个关于 useContext 的大问题。真正了解它的内部工作原理是相当令人困惑的。就像它神奇地工作一样。

所以我的主模块中有这样的:

export const Context = React.createContext(SOMEVALUE) // why set this initial value here

const [value, setValue] = useState(SOMEVALUE) // why set this here again?

return(
<Context.Provider value={[value, setValue]}> // why do i have to pass this  inital value here?
<App />
</Context.Provider>
)

接下来是里面的一些模块

import { Context } from './Main' // why import this when everything was passed?

...

const [value, setValue] = useContext(Context.offline) // what does this help?

<小时/>

现在我的问题是:

为什么需要从 Main 导入 Context，React 如何使用它与状态建立连接？

Answer 1

- 传递给 createContext 的值是多少为了？

export const Context = React.createContext(SOMEVALUE)

传入React.createContext的值是一个后备值，仅在 Context.Consumer 时才会使用在其 Context.Provider 之外使用。这与初始值不同。

- 为什么 useState 中使用相同的后备值？

const [value, setValue] = useState(SOMEVALUE)

优先使用相同的值作为初始值和后备值，并将根据用例进行更改。这一部分实际上是设置一个初始值，并提供一种机制来跟踪和更改该值。

- 为什么我必须将初始值传递给 Context.Provider ？

<Context.Provider value={[value, setValue]}>

Context.Provider其行为类似于发布者/订阅者系统中的发布者。它将把此处设置的这些值广播到任何匹配的 Context.Consumers 。它不跟踪值或提供更改跟踪状态的机制。 useState从上面做的。 Context.Provider只是“广播”该值和更改该值的函数。

- 为什么我必须导入 Context我创建的？

import { Context } from './Main'

const [ value, setValue ] = useContext(Context)

import { Context }正在导入Context您创建并从 './Main' 导出的对象。同Context您用来渲染 Provider 的对象。这用于确保正确的 Provider订阅时引用。

在使用 hooks 之前，您可以通过以下方式订阅 React 上下文:static contextType = MyContext在类里面，或与 <MyContext.Consumer> 。 useContext 只是另一个作为钩子(Hook)执行此操作的 api。您必须将 Context 传递给它对象，以便它知道哪个 Context.Provider订阅，因为可以有任意数量。

上下文文档 here