ps:讓幾個好友看了前幾篇文章，提了幾個建議凸舵，主要就是說文章需要在提煉祖娘，需要精簡。
這一章介紹組件通信啊奄，組件與組件之間如何傳遞數(shù)據(jù)渐苏。
概覽：

組件通信

1.父子通信

父子組件通信

如圖，父子組件之間通信：子組件可通過props接收父組件傳遞的數(shù)據(jù)菇夸；父組件通過函數(shù)回調(diào)接收子組件數(shù)據(jù)琼富。父子對話簡單實現(xiàn)如下：

class SimpleFather extends Component{

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

render(){
    return (
        <div>
            <SimpleSon say={'hello son'} whatSaySon={this.receptionData}/>
            {/*通過say屬性給子組件傳遞數(shù)據(jù)，可傳遞任何類型庄新，這里是字符串*/}
        </div>
    )
}
}

子組件

class SimpleSon extends Component{

ToResponse = () => {
    const { whatSaySon } = this.props;// 通過props拿到父組件的回調(diào)函數(shù)
    whatSaySon('hello father');// 執(zhí)行父組件的回調(diào)函數(shù)
}

render(){
    // 子組件通過props拿到父組件的值
    const { say } = this.props;
    return (
        <div>
            <p>{say}</p>
            <button onClick={this.ToResponse}>回復(fù)</button>
        </div>
    )
}
}

2.跨組件通信

跨組件通信示意圖

1）.context和函數(shù)回調(diào)的跨級通信實例

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拿到父組件的回調(diào)函數(shù)
    callBack('hello father');// 執(zhí)行父組件的回調(diào)函數(shù)
}

render(){
    return (
        <cont.Consumer>
            {/*接收信息的組件必須包裹在consumer中，注意下面的書寫的格式*/}
            {
                (value) => (
                    <div>
                        <p>{value.say}</p>
                        <button onClick={()=>this.ToResponse(value)}>回復(fù)</button>
                    </div>
                )
            }
        </cont.Consumer>
    )
}
}

2）.自定義事件通信

自定義事件通信主要用到就是發(fā)布訂閱模式择诈。這里使用events包來完成械蹋。把上面的代碼改一哈。

import React,{ Component } from 'react';
import { EventEmitter } from 'events';
const emitter = new EventEmitter();// 負(fù)責(zé)訂閱和發(fā)布

class SimpleEvent1 extends Component{

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

componentDidMount(){
    // 組件渲染完畢添加事件監(jiān)聽即訂閱
    this.response = emitter.on('sayHello',words => {
        this.setState({response: words});
    })
}

componentWillUnmount(){
    emitter.removeListener(this.response);// 組件卸載時清除監(jiān)聽即取消訂閱
}

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','你好羞芍？');// 發(fā)布信息哗戈，第一個參數(shù)一定要與訂閱者的一致。
}

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

3.兄弟組件通信

兄弟共享

就不寫例子了荷科。

所有實例都在這里哦：工程源碼地址谱醇，點擊這里
下一章講解高階組件
文章所有實例效果圖：

工程運行效果