奋发图强学 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;
相关推荐
再学一点就睡1 小时前
深入理解 Redux:从手写核心到现代实践(附 RTK 衔接)
前端·redux
天天进步20152 小时前
从零到一:现代化充电桩App的React前端参考
前端·react.js·前端框架
柯南二号2 小时前
【大前端】React Native Flex 布局详解
前端·react native·react.js
龙在天3 小时前
npm run dev 做了什么❓小白也能看懂
前端
hellokai4 小时前
React Native新架构源码分析
android·前端·react native
li理4 小时前
鸿蒙应用开发完全指南:深度解析UIAbility、页面与导航的生命周期
前端·harmonyos
去伪存真4 小时前
因为rolldown-vite比vite打包速度快, 所以必须把rolldown-vite在项目中用起来🤺
前端
KubeSphere4 小时前
Kubernetes v1.34 重磅发布:调度更快,安全更强,AI 资源管理全面进化
前端
wifi歪f4 小时前
🎉 Stenciljs,一个Web Components框架新体验
前端·javascript
1024小神4 小时前
如何快速copy复制一个网站,或是将网站本地静态化访问
前端