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。

在使用钩子之前，您可以通过类中的static contextType = MyContext或使用<MyContext.Consumer>来订阅react上下文。 useContext只是另一个将它用作钩子的API。您必须向其传递一个Context对象，以便知道要订阅哪个Context.Provider，因为它们可以有任意数量。

上下文here的文档

useContext真正做什么？

1 个答案: