在 React 中使用 pubsub.js 进行组件间的通信

一、前言

React 将页面进行组件化，看似相互独立了，信息传递显得有点小复杂，其实使用一个小型轻量 pubsub.js 就可以做到了（目前最新的 1.6.0 版本源码不到 300 行）

题外话：
效果类似 Java 全栈开发中广泛使用的 Session 之 setAttribute、getAttribute，在不同的 class 中取得联系
而 React 也是基于 class 的函数式编程，极其神似

二、效果

A、B 分别为 React 的两个独立的组件，实现信息从 A 从传输到 B 中
在 A 中的输入框输入内容，点击发送，可以看到 B 中的内容替换为 A 中输入的内容
这里写图片描述

三、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ITAEM</title>
    <!--  React的核心库 -->
    <script src="js/react.development.js"></script>
    <!-- 提供操作DOM的react扩展库 -->
    <script src="js/react-dom.development.js"></script>
    <!-- 解析JSX语法代码转为纯JS语法代码的库 -->
    <script src="js/babel.min.js"></script>
    <!-- 发布、订阅 -->
    <script src="js/pubsub.js"></script>
    <!-- LayUI CSS 样式 -->
    <link type="text/css" rel="stylesheet" href="layui/css/layui.css">

</head>
<body>
    <div id="write"></div>
    <div id="show"></div>
    <script type="text/babel">

        class WriteComponent extends React.Component{

            constructor(pros){
                super(pros)
            }

            send=()=>{
                const text1=this.text1.value.trim()
                PubSub.publish('A',text1)
            }

            render(){
                return(
                    <div>
                        <fieldset className="layui-elem-field">
                            <legend><h1>A区</h1></legend>
                            <div className="layui-field-box">
                                输入的内容<input id="text1" name="text1" ref={text1=>this.text1=text1} />
                                &nbsp;&nbsp;<button onClick={this.send.bind(this)} className="layui-btn layui-btn-sm">发送</button>
                            </div>
                        </fieldset>
                    </div>
                )
            }
        }

        class ShowComponent extends React.Component{
            constructor(pros){
                super(pros)
                this.state={
                    text:"A中内容"
                }
            }

            componentDidMount () {
                var token = PubSub.subscribe( 'A', ( message, data )=>{
                    const text1=data
                    this.setState({
                        text:text1
                    })
                })
            }

            render(){
                return(
                    <div>

                        <fieldset className="layui-elem-field">
                            <legend><h1>B区</h1></legend>
                            <div className="layui-field-box">
                                <h3>{this.state.text}</h3>
                            </div>
                        </fieldset>

                    </div>
                )
            }
        }

        ReactDOM.render(<WriteComponent/>,document.getElementById("write"))
        ReactDOM.render(<ShowComponent/>,document.getElementById("show"))
    </script>
</body>
</html>

四、小结

1、发布消息：类似 JavaWeb Session 中的 setAttribute

PubSub.publish

2、订阅消息：类似 JavaWeb Session 中的 getAttribute

PubSub.subscribe

这种通信方式，是不是觉得很简单

在 React 中 使用 pubsub.js 进行组件间的通信

一、前言

二、效果

三、代码

四、小结

猜你喜欢

在 React 中使用 pubsub.js 进行组件间的通信