父子间组件通信

父结点数据传递给子组件通过 props进行传递，子组件只能用于展示或者判断，但不能进行更新
当子组件需要通知父组件数据变化时，父组件通过把函数作为一个props传递，子组件只需要按需调用就可以了

非父子组件间通信

ContextAPI 在顶层进行数据定义，在这个组件树的所有组件就能通过 Context 的API进行获取和修改
Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

React.createContext

创建一个 Context 对象。

const MyContext = React.createContext(defaultValue);
defaultValue
不止是一个值，也可以是一个对象{value，changeValue()} 也可以提供这样的方法进行修改value

当 React 渲染一个订阅了这个 Context 对象的组件，这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。

只有当组件所处的树中没有匹配到 Provider 时，其 defaultValue 参数才会生效。
这有助于在不使用 Provider 包装组件的情况下对组件进行测试。
注意：将 undefined 传递给 Provider 的 value 时，消费组件的 defaultValue 不会生效。

Context.Provider
 
  <消费组件 />

每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化。

Provider 接收一个 value 属性，传递给消费组件。一个 Provider 可以和多个消费组件有对应关系。
多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据。

当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染。
Provider 及其内部 consumer 组件都不受制于 shouldComponentUpdate 函数，因此当 consumer 组件在其祖先组件退出更新的情况下也能更新。

当Provider所在的父组件进行重新渲染时，会导致下边所有消费组件全部重新渲染，即使Provider的value没有发生改变。为了避免这种事情的发生，
可以考虑把Provider的value先绑定在父组件的state上。这样当父组件进行重新渲染时就不会发生因为value是一个新对象而引发消费组件的渲染。
这个是官方的解释，但实质上并不是这样。
Context.Provider说到底还是组件，也按照组件基本法来办事，当value发生变化时，它也可以不引发子组件的渲染。
前提是，子组件作为一个属性(this.props.children)也要保持不变才行。
如果子组件变了，Context.Provider 也不知道你是不是以前的你，只好让你重画了。
看官网中的注意事项的时候能够发现给出的代码中Provider变成了一个单独的组件，对于独立的Provider组件内部构成并没有说明。
具体解释：https://zhuanlan.zhihu.com/p/50336226

const MyContext = React.createContext('light');

class Provider extende React.Component{
  constructor(){
    this.state = {
      value:'dark'
    }
  }
  render (){
    return (
      
        {this.props.children}
      
    )
  }
}

class MyContextRoot extende React.Component{
  render (){
    return (
      
        
      
    )
  }
}

Class.contextType

挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象。
注意这种方法只能挂载一个context，如果需要多个，只能使用Context.Consumer进行多层嵌套

方法一：

这能让你使用 this.context 来消费最近 Context 上的那个值。
你可以在任何生命周期中访问到它，包括 render 函数中。

class MyClassContext extende Component {
  var value = this.context;
}
MyClassContext.contextType = MyContext

方法二：

可以通过static方法绑定(class Fields)

class MyClassContext extende Component{
  static mycontext = MyContext;
}

Context.Consumer

一个 React 函数式组件可以订阅 context 的变更，这让你在函数式组件中可以订阅 context。
同时类组件也通过这种方式订阅多个Context

function MyFuncContext(){
  return (
    
      {(value)=>({
        {value}
      })}
    
  )
}

这种方法需要一个函数作为子元素（function as a child）。
这个函数接收当前的 context 值，并返回一个 React 节点。
传递给函数的 value 值等价于组件树上方离这个 context 最近的 Provider 提供的 value 值。
如果没有对应的 Provider，value 参数等同于传递给 createContext() 的 defaultValue。

Context.displayName

context 对象接受一个名为 displayName 的 property，类型为字符串。React DevTools 使用该字符串来确定 context 要显示的内容。

const MyContext = React.createContext(/* some value */);
MyContext.displayName = 'MyDisplayName';

代码地址

React-组件间通信