目录
Context是什么
Context 是 React 提供的一种机制，用于在组件之间共享数据，而不需要通过 props 一级一级地传递
使用 Context 的好处在于它能够减少组件之间的耦合，使得组件能够更方便地复用。需要共享的数据只需要在 Context 中声明一次，并在需要使用时获取即可，比较适合那些需要在多个组件中共享状态的场景，例如主题、语言、用户登录状态等等
优点
1. 共享数据:`Context` 可以在组件之间共享数据，而不需要通过 props 逐层传递。这样，可以在整个组件树中轻松地访问共享的数据。
2. 跨组件传递数据： `Context` 使得在组件树中的任意组件之间传递数据变得更加容易。无论组件处于哪个层级，只要它们订阅了同一个 `Context`，就可以直接访问共享的数据，而不需要通过中间组件进行数据传递。
3. 减少嵌套: 通过使用 `Context`，可以减少组件之间的嵌套层级。传递数据不再需要通过一级一级的 props 传递，而是通过 `Context` 在组件树的某个位置提供并消费数据。这样可以减少组件层级，提高组件的可读性和可维护性。
4. 代码复用: 使用 `Context` 可以将共享的数据提取到一个地方，并在需要使用的多个组件中复用。这样可以避免在每个组件中重复传递相同的数据，减少冗余代码的书写。
5. 性能优化: React 的 `Context` 具备自动的重渲染优化机制。当 `Provider` 组件的值发生变化时，只会重新渲染使用了这个 `Context` 的组件，而不会重新渲染整个组件树。这种优化能够提高应用的性能和响应性。
工作流程
概括
每个 Context 对象都有一个 Provider 组件，用于提供数据，和一个 Consumer 组件，用于消费数据。在使用 Context 时，一般会在组件树的某个位置创建 Provider，同时将需要共享的数据作为 value 属性传递给 Provider。之后，在需要消费这些数据的组件中，可以使用 Consumer 或 useContext 钩子来获取数据。
步骤
示例代码
目录
在根目录 src目录下创建一个文件，作为传输组件
传输组件 bus.js
// 1. 导入createContext方法
import { createContext } from "react";
// 2. 创建context对象并设置默认值，也可以不设置。默认值在不提供Provider组件时生效
const MyContext = createContext('我是默认值');
// 3. 创建Provider(提供数据)、Consumer(消费数据)组件
const { Provider, Consumer } = MyContext
export default MyContext;
export { Provider, Consumer } //导出用于收发的两个组件跟组件（发送组件） App.js
import { Component } from 'react'
// 引入子组件
import CmpA from './components/Cmp1';
import CmpB from './components/Cmp2'
// 1. 引入Provider组件用来提供数据
import { Provider } from './bus'
class App extends Component {
render() {
return (
// 2.将Provider组件作为根组件并使用value属性提供数据
<Provider value="我是来自根组件的数据">
<div id="app" className="app-root">
<h1>父组件</h1>
<hr />
{/* 组件A */}
<CmpA />
<hr />
{/* 组件B */}
<CmpB />
</div>
</Provider>
)
}
}
export default App;子组件（接收组件）
import { Component } from 'react';
import MyContext from '../bus'
class Cmp2 extends Component {
// 3. 指定contextType读取当前创建的context对象
static contextType = MyContext;
render() {
return (
<div>
<h1>组件B</h1>
{/* 4.通过this.context渲染 */}
<div>{ this.context }</div>
</div>
)
}
}
export default Cmp2如果是函数组件
import React from 'react'
// 1.引入Consumer组件用来消费数据
import { Consumer } from '../bus'
function Cmp2() {
return (
<div>
<h1>组件B</h1>
<Consumer>
{/* Consumber组件的子节点是一个函数，返回html；
函数的参数就是Provider组件提供的数据 */}
{
data => <div>{ data }</div>
}
</Consumer>
</div>
)
}
export default Cmp2
