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.兄弟元件通訊

就不寫例子了。

所有例項都在這裡哦：工程原始碼地址，點選這裡
下一章講解高階元件
文章所有例項效果圖：