使用Context

作用：跨组件传递数据(比如：主题、语言等)

使用步骤：

　　1. 调用React.createContext()创建Provider(提供数据)和Consumer(消费数据)两个组件。

　　2. 使用Provider组件作为父节点

　　3. 设置value属性，表示要传递的数据

　　4. 使用Consumer组件接收数据

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  context
*/

// 创建context得到两个组件
const { Provider, Consumer} = React.createContext()

class App extends React.Component {
  render() {
    return (
      <Provider value="pink">
        <div className='app'>
          <Node />
        </div>
      </Provider>
    )
  }
}

const Node = props => {
  return (
    <div className='node'>
      <SubNode />
    </div>
  )
}

const SubNode = props => {
  return (
    <div className="subnode">
      <Child />
    </div>
  )
}

const Child = props => {
  return (
    <div className="child">
      <Consumer>
        {
          data => <span>我是子节点 -- {data}</span>
        }
      </Consumer>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

总结：

　　1.如果两个组件是远房亲戚(比如，嵌套多层)可以使用Context实现组件通讯

　　2. Context提供了两个组件：Provider和Consumer

　　3. Provider组件：用来提供数据

　　4. Consumer组件：用来消费数据