在使用 React 的過程中，不可避免的需要組件間進行消息傳遞（通信），組件間通信大體有下面幾種情況：

• 父組件向子組件通信
• 子組件向父組件通信
• 跨級組件之間通信
• 非嵌套組件間通信

下面依次說下這幾種通信方式:

父組件向子組件通信

這是最簡單也是最常用的一種通信方式：父組件通過向子組件傳遞 props，子組件得到 props 后進行相應(yīng)的處理。

父組件 App.js：

import React,{ Component } from "react";
import Sub from "./SubComponent.js";
import "./App.css";

export default class App extends Component{

    render(){
        return(
            <div>
                <Sub title = "今年過節(jié)不收禮" />
            </div>
        )
    }
}

子組件 SubComponent.js：

import React from "react";

const Sub = (props) => {
    return(
        <h1>
            { props.title }
        </h1>
    )
}

export default Sub;

子組件向父組件通信

利用回調(diào)函數(shù)，可以實現(xiàn)子組件向父組件通信：父組件將一個函數(shù)作為 props 傳遞給子組件，子組件調(diào)用該回調(diào)函數(shù)，便可以向父組件通信

SubComponent.js：

import React from "react";

const Sub = (props) => {
    const cb = (msg) => {
        return () => {
            props.callback(msg)
        }
    }
    return(
        <div>
            <button onClick = { cb("我們通信把") }>點擊我</button>
        </div>
    )
}

export default Sub;

App.js：

import React,{ Component } from "react";
import Sub from "./SubComponent.js";
import "./App.css";

export default class App extends Component{
    callback(msg){
        console.log(msg);
    }
    render(){
        return(
            <div>
                <Sub callback = { this.callback.bind(this) } />
            </div>
        )
    }
}

跨級組件通信

所謂跨級組件通信，就是父組件向子組件的子組件通信，向更深層的子組件通信。跨級組件通信可以采用下面兩種方式：

• 中間組件層層傳遞 props
• 使用 context 對象

對于第一種方式，如果父組件結(jié)構(gòu)較深，那么中間的每一層組件都要去傳遞 props，增加了復(fù)雜度，并且這些 props 并不是這些中間組件自己所需要的。不過這種方式也是可行的，當(dāng)組件層次在三層以內(nèi)可以采用這種方式，當(dāng)組件嵌套過深時，采用這種方式就需要斟酌了

使用context是另一種可行的方式，context相當(dāng)于一個全局變量，是一個大容器，我們可以把要通信的內(nèi)容放在這個容器中，這樣一來，不管嵌套有多深，都可以隨意取用。

使用 context 也很簡單，需要滿足兩個條件：

• 上級組件要聲明自己支持 context，并提供一個函數(shù)來返回相應(yīng)的context 對象
• 子組件要聲明自己需要使用 context

下面以代碼說明，我們新建 3 個文件：父組件 App.js，子組件 Sub.js，子組件的子組件 SubSub.js

App.js：

import React, { Component } from 'react';
import PropTypes from "prop-types";
import Sub from "./Sub";
import "./App.css";

export default class App extends Component{
    // 父組件聲明自己支持 context
    static childContextTypes = {
        color:PropTypes.string,
        callback:PropTypes.func,
    }

    // 父組件提供一個函數(shù)，用來返回相應(yīng)的 context 對象
    getChildContext(){
        return{
            color:"red",
            callback:this.callback.bind(this)
        }
    }

    callback(msg){
        console.log(msg)
    }

    render(){
        return(
            <div>
                <Sub></Sub>
            </div>
        );
    }
} 

Sub.js：

import React from "react";
import SubSub from "./SubSub";

const Sub = (props) =>{
    return(
        <div>
            <SubSub />
        </div>
    );
}

export default Sub;

SubSub.js：

import React,{ Component } from "react";
import PropTypes from "prop-types";

export default class SubSub extends Component{
    // 子組件聲明自己需要使用 context
    static contextTypes = {
        color:PropTypes.string,
        callback:PropTypes.func,
    }
    render(){
        const style = { color:this.context.color }
        const cb = (msg) => {
            return () => {
                this.context.callback(msg);
            }
        }
        return(
            <div style = { style }>
                SUBSUB
                <button onClick = { cb("我胡漢三又回來了！") }>點擊我</button>
            </div>
        );
    }
}

如果是父組件向子組件單向通信，可以使用變量，如果子組件想向父組件通信，同樣可以由父組件提供一個回調(diào)函數(shù)，供子組件調(diào)用，回傳參數(shù)。

在使用 context 時，有兩點需要注意：

• 父組件需要聲明自己支持 context，并提供 context 中屬性的 PropTypes
• 子組件需要聲明自己需要使用 context，并提供其需要使用的 context 屬性的 PropTypes
• 父組件需提供一個 getChildContext 函數(shù)，以返回一個初始的 context 對象

如果組件中使用構(gòu)造函數(shù)（constructor），還需要在構(gòu)造函數(shù)中傳入第二個參數(shù) context，并在 super 調(diào)用父類構(gòu)造函數(shù)是傳入 context，否則會造成組件中無法使用 context

...
constructor(props,context){
  super(props,context);
}
...

改變 context 對象

我們不應(yīng)該也不能直接改變 context 對象中的屬性，要想改變 context 對象，只有讓其和父組件的 state 或者 props 進行關(guān)聯(lián)，在父組件的 state 或 props 變化時，會自動調(diào)用 getChildContext 方法，返回新的 context 對象，而后子組件進行相應(yīng)的渲染。

修改 App.js，讓 context 對象可變：

import React, { Component } from 'react';
import PropTypes from "prop-types";
import Sub from "./Sub";
import "./App.css";

export default class App extends Component{
    constructor(props) {
        super(props);
        this.state = {
            color:"red"
        };
    }
    // 父組件聲明自己支持 context
    static childContextTypes = {
        color:PropTypes.string,
        callback:PropTypes.func,
    }

    // 父組件提供一個函數(shù)，用來返回相應(yīng)的 context 對象
    getChildContext(){
        return{
            color:this.state.color,
            callback:this.callback.bind(this)
        }
    }

    // 在此回調(diào)中修改父組件的 state
    callback(color){
        this.setState({
            color,
        })
    }

    render(){
        return(
            <div>
                <Sub></Sub>
            </div>
        );
    }
} 

此時，在子組件的 cb 方法中，傳入相應(yīng)的顏色參數(shù)，就可以改變 context 對象了，進而影響到子組件：

...
return(
    <div style = { style }>
        SUBSUB
        <button onClick = { cb("blue") }>點擊我</button>
    </div>
);
...

context 同樣可以應(yīng)在無狀態(tài)組件上，只需將 context 作為第二個參數(shù)傳入：

import React,{ Component } from "react";
import PropTypes from "prop-types";

const SubSub = (props,context) => {
    const style = { color:context.color }
    const cb = (msg) => {
        return () => {
            context.callback(msg);
        }
    }

    return(
        <div style = { style }>
            SUBSUB
            <button onClick = { cb("我胡漢三又回來了！") }>點擊我</button>
        </div>
    );
}

SubSub.contextTypes = {
    color:PropTypes.string,
    callback:PropTypes.func,
}

export default SubSub;

非嵌套組件間通信

非嵌套組件，就是沒有任何包含關(guān)系的組件，包括兄弟組件以及不在同一個父級中的非兄弟組件。對于非嵌套組件，可以采用下面兩種方式：

• 利用二者共同父組件的 context 對象進行通信
• 使用自定義事件的方式

如果采用組件間共同的父級來進行中轉(zhuǎn)，會增加子組件和父組件之間的耦合度，如果組件層次較深的話，找到二者公共的父組件不是一件容易的事，當(dāng)然還是那句話，也不是不可以...
這里我們采用自定義事件的方式來實現(xiàn)非嵌套組件間的通信。

我們需要使用一個 events 包：

npm install events --save &&
yarn events --save

新建一個 ev.js，引入 events 包，并向外提供一個事件對象，供通信時使用：

import { EventEmitter } from "events";
export default new EventEmitter();

App.js：

import React, { Component } from 'react';

import Foo from "./Foo";
import Boo from "./Boo";

import "./App.css";

export default class App extends Component{
    render(){
        return(
            <div>
                <Woo />
                <Aoo />
            </div>
        );
    }
} 

Woo.js：

import React,{ Component } from "react";
import emitter from "./ev"

export default class Foo extends Component{
    constructor(props) {
        super(props);
        this.state = {
            msg:null,
        };
    }
    componentDidMount(){
        // 聲明一個自定義事件
        // 在組件裝載完成以后
        this.eventEmitter = emitter.addListener("callMe",(msg)=>{
            this.setState({
                msg
            })
        });
    }
    // 組件銷毀前移除事件監(jiān)聽
    componentWillUnmount(){
        emitter.removeListener(this.eventEmitter);
    }
    render(){
        return(
            <div>
                { this.state.msg }
                我是非嵌套 1 號
            </div>
        );
    }
}

Aoo.js：

import React,{ Component } from "react";
import emitter from "./ev"

export default class Boo extends Component{
    render(){
        const cb = (msg) => {
            return () => {
                // 觸發(fā)自定義事件
                emitter.emit("callMe","Hello")
            }
        }
        return(
            <div>
                我是非嵌套 2 號
                <button onClick = { cb("blue") }>點擊我</button>
            </div>
        );
    }
}

自定義事件是典型的發(fā)布/訂閱模式，通過向事件對象上添加監(jiān)聽器和觸發(fā)事件來實現(xiàn)組件間通信。

總結(jié)

本文總結(jié)了 React 中組件的幾種通信方式，分別是：

• 父組件向子組件通信：使用 props
• 子組件向父組件通信：使用 props 回調(diào)
• 跨級組件間通信：使用 context 對象
• 非嵌套組件間通信：使用事件訂閱

事實上，在組件間進行通信時，這些通信方式都可以使用，區(qū)別只在于使用相應(yīng)的通信方式的復(fù)雜程度和個人喜好，選擇最合適的那一個。比如，通過事件訂閱模式通信不止可以應(yīng)用在非嵌套組件間，還可以用于跨級組件間，非嵌套組件間通信也可以使用 context 等。關(guān)鍵是選擇最合適的方式。

當(dāng)然，自己實現(xiàn)組件間的通信還是太難以管理了，因此出現(xiàn)了很多狀態(tài)管理工具，如 flux、redux 等，使用這些工具使得組件間的通信更容易追蹤和管理。