react中组件通信。context API。示例代码

目录

Context是什么

优点

工作流程

概括

步骤

示例代码

目录

传输组件  bus.js

跟组件（发送组件）  App.js

子组件（接收组件）

---

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 钩子来获取数据。

步骤

1. 在 src 目录下创建一个 bus.js 文件并调用 createContext() 方法，创建一个 context 对象，

然后导出

2. 在 App 根组件中从 bus.js 中导入 Provider 组件，用来提供数据

3. 使用 Provider 组件作为父节点

4. 设置 value 属性，值为要传递的数据

5. 指定 contextType 读取当前创建的 context 对象

6. 使用 this.context 来渲染值

示例代码

目录

在根目录 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属性提供数据
   
    

     
父组件
     

     {/* 组件A */}
     
     

     {/* 组件B */}
     
    
   
  )
 }
}
export default App;

子组件（接收组件）

import { Component } from 'react';
import MyContext from '../bus'

class Cmp2 extends Component {
  // 3. 指定contextType读取当前创建的context对象
  static contextType = MyContext;
  render() {
   return (
    

     
组件B
     {/* 4.通过this.context渲染 */}
     
{ this.context }
    
  )
 }
}
export default Cmp2

如果是函数组件

import React from 'react'
// 1.引入Consumer组件用来消费数据

import { Consumer } from '../bus'

function Cmp2() {
  return (
   

    
组件B
    
       {/* Consumber组件的子节点是一个函数，返回html；
函数的参数就是Provider组件提供的数据 */}
      {
          data => 
{ data }
      }
        
    
   )
}
export default Cmp2