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

步骤

示例代码

目录

在根目录 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