React技术栈-组件间通信的2种方式

　　　　　　　　　React技术栈-组件间通信的2种方式

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

 

 

　　所谓组件通信说白了就是数据的传递。我们可以通过React的props传递数据，当然，也可以使用消息队列来传递数据。

 

一.通过props传递数据

　　共同的数据放在父组件上, 特有的数据放在自己组件内部(state)

　　通过props可以传递一般数据和函数数据, 只能一层一层传递

　　一般数据-->父组件传递数据给子组件-->子组件读取数据
　　
　　函数数据-->子组件传递数据给父组件-->子组件调用函数

 

二.使用消息发布(publish)-订阅(subscribe)机制

1>.下载支持消息发布订阅的库

　　相比消息发布订阅大家应该都有所了解，我这里就不罗嗦了，Javascript也有专门支持消息发布订阅的工具库，名为PubSubJS。

　　PubSubJS工具库的GitHub地址:
　　　　https://github.com/mroderick/PubSubJS

2>.下载PubSubJS工具库

C:\Users\yinzhengjie\WebstormProjects\myweb\my-react> npm install --save pubsub-js

 

三.使用PubSubJS改写用户搜索案例的代码(https://www.cnblogs.com/yinzhengjie/p/12147675.html)

1>.项目组织架构不变

2>.项目代码

import React,{Component} from 'react';

import Search from "./search";
import Main from "./main";

export default class App extends Component{

    render(){
        return (
            <div className="container">
                 <Search />
                 <Main />
                </div>
        )
    }
}

app.jsx文件内容