在 React 应用中，上下文（context）是一种方便的方式来共享数据。React 官方提供了 createContext API 来帮助我们创建和使用上下文，但有时候需要更细粒度的控制和更简单的 API。这时候就可以用第三方包 create-react-context。
安装
使用 npm 进行安装：
--- ------- --------------------
或者使用 Yarn：
---- --- --------------------
创建上下文
首先，我们需要使用 create-react-context 导入 createContext 函数：
------ ------------- ---- -----------------------
接着，我们可以使用 createContext 函数来创建一个上下文对象：
----- --------- - ----------------
这个 MyContext 对象包含了两个属性：Provider 和 Consumer。Provider 是用来提供数据的组件，而 Consumer 则是用来消费数据的组件。
使用上下文
提供数据
要提供数据，我们需要在组件树中包裹 Provider 组件：
------------------- ------------- ------- ---- ----- --- --- --- ---------------------
在这个例子中，我们提供了一个包含 name 和 age 属性的对象作为值传递给了 Provider 组件。注意，只要 Provider 的值发生变化，所有使用了这个上下文的组件都会重新渲染。
消费数据
要消费数据，我们可以使用 Consumer 组件：
-------------------- ------ -- ------------------ ------------------ ---------------------
在这个例子中，Consumer 接收一个函数作为子节点，这个函数接收上下文的值作为参数，并返回一个 React 元素。这个元素可以是任何需要上下文数据的组件。
高级用法
默认值
在创建上下文时，我们可以传递一个默认值：
----- --------- - -------------------- ---------- ---- ----
如果没有在组件树中包裹 Provider 组件提供数据，那么这个默认值就会被使用。
多个上下文
在一个应用中，可能会有多个需要共享数据的地方。这时候，我们可以创建多个上下文对象：
----- ---------- - ---------------- ----- ---------- - ----------------
然后，在组件中使用对应的上下文对象：
-------------------- --------- -- ----
-------------------- --------- -- ----
--- --- ---
----------------------
----------------------使用 contextType
从 React v16.6 开始，可以使用 static contextType 属性来订阅单一上下文：
----- ------- ------- --------------- -
------ ----------- - ----------
-------- -
----- ------ ---- - -------------
------ ------------ ------------
-
-在这个例子中，我们将 MyClass 组件订阅到了 MyContext 上下文。这使得我们可以在组件内部通过 this.context 访问到上下文数据。
总结
create-react-context 是一个方便的工具，可以帮助我们更轻松地使用上下文。通过提供一个简单的 API，它让我们更容易地共享数据，并且可以控制数据的更新和渲染的粒度。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/46286