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

2023-12-21 06:26:17

目录

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属性提供数据
   <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

文章来源:https://blog.csdn.net/kkkys_kkk/article/details/135108459
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。