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

• 一. Context 概念理解
• 二. Context 使用
• 三. Context 组件传值实例

Context官网： https://zh-hans.reactjs.org/docs/context.html

一. Context 概念理解

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

二. Context 使用

1. 创建一个 Context 对象

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

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

2. 渲染子组件

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

   {/* 子组件 */}
   
   

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

3. 后代组件读取数据

   方法一：Class.contextType，仅适用于类组件。

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

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

   方法二：Context.Consumer，函数组件与类组件都可以使用。

   {value => /* 基于 context 值进行渲染*/}
   
   

   • value 就是 context 中的 value 数据

三. Context 组件传值实例

1. 源码

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

2. 实现效果