React组件通信方式-PubSubJs

1通过props传递

2消息订阅和发布机制

3redux

订阅发布机制的使用

用到的库

PubSubJs

使用方法

下载

	npm install --save pubsub-js

在用户搜索中，需要在兄弟组件Search和Main之间通信，可以用到PubSubJs

在Search组件中发布消息，类似于绑定监听，发布消息需要指定消息名和数据，订阅消息需要指定消息名和回调函数

导包

	import PubSubJs from "pubsub-js"

在Search中发布消息

	PubSub.publish('search', searchName);

在Main中初始化生命周期中订阅消息

	componentDidMount () {
		//订阅消息
		PubSubJs.subscribe('search', (msg, searchName) => {//说明指定了新的searchName，需要请求
		//更新状态
        this.setState({
            initView:false,
            loading:true
        })

        //发送ajax请求
        const url = `https://api.github.com/search/users?q=${searchName}` ;
        axios.get(url)
            .then(response => {
                //得到响应数据
                const result = response.data;
                const users = result.items.map(item => {
                    return {name:item.login, url:item.html_url, avatarUrl:item.avatar_url};
                })
                //更新状态(成功)
                this.setState({
                    loading:false,
                    users
                })
            })
            .catch(error => {
                //更新状态(失败)
                this.setState({
                    loading:false,
                    errorMsg:error.message
                })
            })		
		})
	}

注意写回调函数最好用箭头函数