组件之间的通信——提供者-消费者设计模式(context对象)

组件之间的通信——提供者-消费者设计模式(context对象)

​ Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

​ 使用context方式中context相当于一个全局变量，是一个大容器，我们可以把要通信的内容放在这个容器中，这样不管嵌套多深。都可以随意取用。使用context要满足两个条件：上级组件要声明自己支持context，并提供一个函数来返回相应的context对象、子组件要声明自己需要使用context。

一、准备工作：

​ 1、创建myProject04工程目录。

​ 2、创建清单文件。 npm init -y

​ 3、创建需要的第三方依赖。 npm install react react-dom react-scripts --save

​ 4、在工程目录下创建public文件夹，在该文件夹下创建index.html。

​ 5、在工程目录下创建src文件夹，在该文件夹下创建：

​ （1）入口文件index.js；

​ （2）外层组件App.js和APP.css(App样式文件)；

​ （3）components文件夹，在该文件夹下创建ComA.jsx，ComB.jsx，ComC.jsx，ComD.jsx；

​ （4）store文件夹，在该文件夹下创建TestContext.js，在js文件中创建context容器(用于存储数据，相当于全局变量)

二、编写代码：

​ 1、index.html：

   <div id="root"></div>

​ 2、index.js：

import ReactDOM from 'react-dom/client'
import App from './App'
const root = ReactDOM.createRoot(document.getElementById('root')