我对 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 如何使用它与状态建立连接?
最佳答案
- 传递给 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
关于reactjs - useContext 到底做了什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56384198/