ReactContext使用（共享对于一个组件树而言是“全局”的数据）

Context官网&＃xff1a; https://zh-hans.reactjs.org/docs/context.html

1. Context 提供了一个无需为每层组件手动添加 props&＃xff0c;就能在组件树间进行数据传递的方法。
2. React的 context 就是一个全局变量&＃xff0c;可以从根组件跨级别在React的组件中传递。
3. 通常用于 祖组件 与 后代组件 之间通信。

1. 创建一个 Context 对象

   // 从 react 中引入 createContext
import { createContext } from "react";
// 创建一个 Context 对象
const MyContext &＃61; createContext(defaultValue);

   

   • 只有当组件所处的树中没有匹配到 Provider 时&＃xff0c;其 defaultValue 参数才会生效。
   • 此默认值有助于在不使用 Provider 包装组件的情况下对组件进行测试。

2. 渲染子组件

   
   

   
   

   1. 每个 Context 对象都会返回一个 Provider React 组件&＃xff0c;它允许消费组件订阅 context 的变化。
   2. Provider 接收一个 value 属性&＃xff0c;传递给消费组件。一个 Provider 可以和多个消费组件有对应关系。多个 Provider 也可以嵌套使用&＃xff0c;里层的会覆盖外层的数据。
   3. 当 Provider 的 value 值发生变化时&＃xff0c;它内部的所有消费组件都会重新渲染。从 Provider 到其内部 consumer 组件&＃xff08;包括 .contextType 和 useContext&＃xff09;的传播不受制于 shouldComponentUpdate 函数&＃xff0c;因此当 consumer 组件在其祖先组件跳过更新的情况下也能更新。
   4. 通过新旧值检测来确定变化&＃xff0c;使用了与 Object.is 相同的算法。

   
   

   <MyContext.Provider value&＃61;{value}>
{/* 子组件 */}
<component/>
MyContext.Provider>

   

   • 渲染子组件时&＃xff0c;外面包裹 xxxContext.Provider
   • 通过value属性给后代组件传递数据

3. 后代组件读取数据

   
   

   
   

   方法一&＃xff1a;Class.contextType&＃xff0c;仅适用于类组件。

   
   

   class MyClass extends React.Component {
// 声明接收context&＃xff0c;使用 static 这个类属性来初始化 contextType
static contextType &＃61; MyContext;
render() {
// 读取context中的value数据
let value &＃61; this.context;
/* 基于这个值进行渲染工作 */
}
}

   

   • 声明接收 context&＃xff0c;使用 static 这个类属性来初始化 contextType。
   • 通过 this.context&＃xff0c;读取 context 中的 value 数据。
   
   

   
   

   方法二&＃xff1a;Context.Consumer&＃xff0c;函数组件与类组件都可以使用。

   
   

   <MyContext.Consumer>
{value &＃61;> /* 基于 context 值进行渲染*/}
MyContext.Consumer>

   

   • value 就是 context 中的 value 数据

1. 源码

   import React, { Component } from "react";
import { createContext } from "react";
// 创建一个createContext对象
const CountContext &＃61; createContext();
// 从 Context 中获取 Provider, Consumer
const { Provider, Consumer } &＃61; CountContext;
export default class A extends Component {
state &＃61; {
count: 100,
name: "tom",
};
render() {
const { name, count } &＃61; this.state;
return (
<div>
<h2>A组件</h2>
<h4>数值为&＃xff1a;{count}</h4>
{/* 通过value属性给后代组件传递数据 */}
<Provider value&＃61;{{ name, count }}>
<B />
</Provider>
</div>
);
}
}
class B extends Component {
render() {
return (
<div>
<h2>B组件</h2>
<C />
<D />
</div>
);
}
}
class C extends Component {
// 声明接收context
static contextType &＃61; CountContext;
render() {
// 接收值
console.log(this.context);
return (
<div>
<h2>C组件</h2>
<h4>
接收到的A组件数值为&＃xff1a;{this.context.count},名字为&＃xff1a;{this.context.name}
</h4>
</div>
);
}
}
function D() {
return (
<div>
<h2>D组件</h2>
<h4>
<Consumer>
{(value) &＃61;> {
// 接收值
console.log(value);
return &＃96;接收到的A组件数值为&＃xff1a;${value.count},名字为&＃xff1a;${value.name}&＃96;;
}}
</Consumer>
</h4>
</div>
);
}


2. 实现效果