R5-React组件通信详解

ps:让几个好友看了前几篇文章，提了几个建议，主要就是说文章需要在提炼，需要精简。
这一章介绍组件通信，组件与组件之间如何传递数据。
概览：

1.父子通信

如图，父子组件之间通信：子组件可通过props接收父组件传递的数据；父组件通过函数回调接收子组件数据。父子对话简单实现如下：

    class SimpleFather extends Component{

    receptionData = (data) => {
        console.log(`son say:${data}`);// 打印出子组件传回的信息
    }
    
    render(){
        return (
            <div>
                <SimpleSon say={'hello son'} whatSaySon={this.receptionData}/>
                {/*通过say属性给子组件传递数据，可传递任何类型，这里是字符串*/}
            </div>
        )
    }
    }

子组件

    class SimpleSon extends Component{

    ToResponse = () => {
        const { whatSaySon } = this.props;// 通过props拿到父组件的回调函数
        whatSaySon('hello father');// 执行父组件的回调函数
    }
    
    render(){
        // 子组件通过props拿到父组件的值
        const { say } = this.props;
        return (
            <div>
                <p>{say}</p>
                <button onClick={this.ToResponse}>回复</button>
            </div>
        )
    }
    }

2.跨组件通信

1）.context和函数回调的跨级通信实例

 import React,{ Component } from 'react';
    const cont = React.createContext('hello everyone');

    class SimpleContext1 extends Component{

    constructor(props){
        super(props);
        this.state = {
            options:{
                say:'hello',
                callBack:this.receptionData,
            }
        }
    }

    receptionData = (data) => {
        console.log(`son say:${data}`);// 打印出子组件传回的信息
    }

    render(){
        const { options } = this.state;
        return (
            <cont.Provider value={options}>
                {/*信息提供者必须被包裹在Provider中，提供的值放在value中*/}
                <div>
                    <SimpleContext2/>
                </div>
            </cont.Provider>
        )
    }
    }

一级子组件

     class SimpleContext2 extends Component{

    render(){
        return (
            <div>
                <p>simpleContext2</p>
                <SimpleContext3 />
                {/*组件SimpleContext3没有通过属性传任何值*/}
            </div>
        )
    }
    }

二级子组件

    class SimpleContext3 extends Component{

    ToResponse = (value) => {
        const { callBack } = value;// 通过value拿到父组件的回调函数
        callBack('hello father');// 执行父组件的回调函数
    }

    render(){
        return (
            <cont.Consumer>
                {/*接收信息的组件必须包裹在consumer中，注意下面的书写的格式*/}
                {
                    (value) => (
                        <div>
                            <p>{value.say}</p>
                            <button onClick={()=>this.ToResponse(value)}>回复</button>
                        </div>
                    )
                }
            </cont.Consumer>
        )
    }
    }

2）.自定义事件通信

自定义事件通信主要用到就是发布订阅模式。这里使用events包来完成。把上面的代码改一哈。

 import React,{ Component } from 'react';
    import { EventEmitter } from 'events';
    const emitter = new EventEmitter();// 负责订阅和发布

    class SimpleEvent1 extends Component{

    constructor(props){
        super(props);
        this.state = {
            response:'',
        }
    }

    componentDidMount(){
        // 组件渲染完毕添加事件监听即订阅
        this.response = emitter.on('sayHello',words => {
            this.setState({response: words});
        })
    }

    componentWillUnmount(){
        emitter.removeListener(this.response);// 组件卸载时清除监听即取消订阅
    }

    render(){
        const { response } = this.state;
        return (
            <div>
                <p>{response}</p>
                <SimpleEvent2/>
            </div>
        )
    }
    }

一级子组件

    class SimpleEvent2 extends Component{

    render(){
        return (
            <div>
                <p>simpleEvent2</p>
                <SimpleEvent3 />
                {/*组件SimpleEvent3没有通过属性传任何值*/}
            </div>
        )
    }
    }

二级子组件

    class SimpleEvent3 extends Component{

    ToResponse = () => {
        emitter.emit('sayHello','你好？');// 发布信息，第一个参数一定要与订阅者的一致。
    }

    render(){
        return (
            <div>
                <p>{}</p>
                <button onClick={this.ToResponse}>回复</button>
            </div>
        )
    }
    }

3.兄弟组件通信

就不写例子了。

所有实例都在这里哦：工程源码地址，点击这里
下一章讲解高阶组件
文章所有实例效果图：