react学习（十三）消息订阅与发布进行组件间通信

最新推荐文章于 2025-12-11 18:20:43 发布

原创最新推荐文章于 2025-12-11 18:20:43 发布 · 51 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #学习 #javascript #ecmascript #前端

本文介绍如何使用pubsub-js库实现在React应用中的组件间通信。通过发布订阅模式，Header组件能够向List组件发送任务数据，无需直接依赖于props和回调函数。这种方式有助于简化组件之间的交互。

1 pubsub-js

我们在react学习(十一)React组件编程实例中，实现了一个小功能，在Header组件中输入一项任务，该任务将添加到List组件中，由于他们是兄弟组件，组件间的传值通过props属性和回调函数的方式实现。这一节我们采用发布订阅方式实现。

我们对react学习(十一)React组件编程实例进行了精简，去掉了所有样式文件，去掉了其他功能，只保留了Header输入任务List中将添加一个新任务这一个功能。

首先，我们引入pubsub-js依赖

cnpm install pubsub-js

发布消息：

PubSub.publish('topic',消息体)

订阅消息

        PubSub.subscribe('topic',(_,data)=>{
            console.log('订阅的消息',data)
            //其他处理逻辑
        })

2 实例

App.js

import React, { Component } from 'react';
import Header from './components/Header/Header';
import List from './components/List/List';

class App extends Component {
  render() {
    return (
      <div>
        <div>
          <Header/>
          <List/>
        </div>
      </div>
    );
  }
}

export default App;

Header.js

import React, { Component } from 'react';
import PubSub from 'pubsub-js'

export default class Header extends Component {
    handleKeyUp =(e)=>{
        //判断是否是回车
        if(e.keyCode !== 13) return
        //准备好一个todo对象
        const todoObj = {id:Date.parse(new Date()),name:e.target.value,done:false}
        //消息发布，传递给List组件
        PubSub.publish('szj',todoObj)
    }
    render() {
        return (
            <div>
                <input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认"></input>
            </div>
        );
    }
}

List.js

import React, { Component } from 'react';
import PubSub from 'pubsub-js'

export default class List extends Component {
    state = {
        todos: [
          {id:'001', name:'吃饭', done:true},
          {id:'002', name:'睡觉', done:true},
          {id:'003', name:'打代码', done:false},
        ]
      }
    
    componentDidMount(){
        //消息订阅
        PubSub.subscribe('szj',(_,data)=>{
            console.log('订阅的消息',data)
            const {todos} = this.state
            const newTodos = [data,...todos]
            this.setState({todos:newTodos})
        })
    }

    render() {
        return (
            <ul>
                {
                    this.state.todos.map((todo)=>{
                        return (
                            <li key={todo.id}>
                                <label>
                                    <span>{todo.name}</span>
                                </label>
                            </li>
                        )
                    })
                }
            </ul>
        );
    }
}

效果展示