奋发图强学 React 系列 (一):React 组件通信

今天上午主要学习了两种 React 组件通信的方式:

方式一:props 和 callBack 方式

可以称为最基本的通信方式,父组件可以通过 props 将信息传递给子组件,子组件可以通过执行 props 中的回调函数(callBack)来触发父组件的方法,实现父与子组件通信。

示例 demo 如下:

jsx 复制代码
import React, { useState, useEffect } from "react";
/**
 * 父子组件之间通信方式 1:props 和 callback 的方式
 */
//
function Son(props) {
  const {fatherSay, sayFather} = props;
  return (
    <div className="son">
      我是子组件
      <div>父组件对我说:{fatherSay}</div>
      <div>我对父组件说:<input type="text" onChange={e => sayFather(e.target.value)}/></div>
    </div>
  )
}

function Father() {
  const [childSay, setChildSay] = useState('');
  const [fatherSay, setFatherSay] = useState('');

  return (
    <div className="father">
      我是父组件
      <div>子组件对我说:{childSay}</div>
      <input type="text" onChange={e => setFatherSay(e.target.value)} />
      <Son fatherSay={fatherSay} sayFather={setChildSay} />
    </div>
  )
}

export default Father;

方式二:eventBus 总线

eventBus 是一个事件发布订阅的轻量级工具库,来源于 Android 事件发布。

eventBus 大致流程如下:

A 模块通过 on 向 EventBus 中注册事件 callBack

B 模块通过 emit 触发 A 模块中的事件 callBack,并传递参数,实现 B -> A 的通信流程

首先用 js 实现一个 eventBus

js 复制代码
class eventBus {
  event = {};
  on(eventName, callBack) {
    if (this.event[eventName]) {
      this.event[eventName].push(callBack);
    } else {
      this.event[eventName] = [callBack];
    }
  }

  emit(eventName, ...args) {
    if (this.event[eventName]) {
      this.event[eventName].forEach((callBack) => {
        callBack(...args);
      });
    }
  }

  off(eventName) {
    if (this.event[eventName]) {
      delete this.event[eventName];
    }
  }
}

export default new eventBus();

接下来可以通过这个 eventBus 实现 React 中的通信

jsx 复制代码
import React, { useState, useEffect } from "react";
import BusService from './eventBus';
/**
 * 父子组件之间通信的方式二:eventBus 事件总线
 */

function Son2() {
  const [fatherSay, setFatherSay] = useState('');
  useEffect(() => {
    BusService.on('fatherSay', (value) => {
      setFatherSay(value)
    })
    return function() {
      BusService.off('fatherSay')
    }
  }, [])
  return <div className="son">
    我是子组件
    父组件对我说:{fatherSay}
    <div>
      我对父组件说:
      <input type="text" onChange={e => BusService.emit('childSay', e.target.value)} />
    </div>
  </div>
}

function Father2() {
  const [childSay, setChildSay] = useState('');
  useEffect(() => {
    BusService.on('childSay', (value) => {
      setChildSay(value);
    })
    return function() {
      BusService.off('childSay')
    }
  }, [])
  return <div className="father">
    我是父组件
    子组件对我说:{childSay}
    <div>
      我对子组件说:
      <input type="text" onChange={e => BusService.emit('fatherSay', e.target.value)} />
    </div>
    <Son2 />
  </div>
}

export default Father2;
相关推荐
百万蹄蹄向前冲4 小时前
秋天的第一口代码,Trae SOLO开发体验
前端·程序员·trae
努力奋斗14 小时前
VUE-第二季-02
前端·javascript·vue.js
路由侠内网穿透4 小时前
本地部署 SQLite 数据库管理工具 SQLite Browser ( Web ) 并实现外部访问
运维·服务器·开发语言·前端·数据库·sqlite
一只韩非子4 小时前
程序员太难了!Claude 用不了?两招解决!
前端·claude·cursor
JefferyXZF4 小时前
Next.js项目结构解析:理解 App Router 架构(二)
前端·全栈·next.js
Sane4 小时前
react函数组件怎么模拟类组件生命周期?一个 useEffect 搞定
前端·javascript·react.js
gnip5 小时前
可重试接口请求
前端·javascript
若梦plus5 小时前
模块化与package.json
前端
烛阴5 小时前
Aspect Ratio -- 宽高比
前端·webgl
若梦plus5 小时前
Node.js中util.promisify原理分析
前端·node.js