React 中组件间通信的几种方式

1、父组件向子组件通信
父组件通过向子组件传递 props，子组件得到 props 后进行相应的处理

image.png

2、子组件向父组件通信

image.png

3、跨级组件之间通信
父组件向子组件的子组件通信，向更深层的子组件通信

思路1：中间组件层层传递 props
如果父组件结构较深，那么中间的每一层组件都要去传递 props，增加了复杂度，并且这些 props 并不是这些中间组件自己所需要的。当组件层次在三层以内可以采用这种方式，当组件嵌套过深时，就考虑其他方式

思路2：使用 context 对象
context 相当于一个全局变量，是一个大容器，我们可以把要通信的内容放在这个容器中，这样一来，不管嵌套有多深，都可以随意取用
使用 context 也很简单，需满足：

1、上级组件要声明自己支持 context，提供 context 中属性的 PropTypes，并提供一个函数来返回相应的 context 对象
2、子组件要声明自己需要使用 context，并提供其需要使用的 context 属性的 PropTypes
3、父组件需提供一个 getChildContext 函数，以返回一个初始的 context 对象

如果组件中使用构造函数（constructor），还需要在构造函数中传入第二个参数 context，并在 super 调用父类构造函数是传入 context，否则会造成组件中无法使用 context。
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>
        );
    }
}

image.png image.png image.png

4、非嵌套组件间通信
或者说是兄弟组件间
首先需要：

我们需要使用一个 events 包：
npm install events --save
新建一个 ev.js，引入 events 包，并向外提供一个事件对象，供通信时使用：

image.png image.png

通信参考网址：https://blog.csdn.net/zhengjie0722/article/details/81979919

本文章参考了，原创来源于https://www.jianshu.com/p/fb915d9c99c4，若本文有错误的地方，请大家帮忙指出哦！谢谢