React.CreateContext

跨组件传递的内容组件 ， 改组件导出两个对象 Provider 和 consumer

简单的使用：

  //创建上下文
  import React from 'react'
  import ReactDOM from 'react-dom'
  //initialValue   初始化
  //let {Provider , Consumer} = React.createContext(initialValue)
  let {Provider , Consumer} = React.createContext()
  
  //父组件
  function Parent(props){
      return (
        <div>
          <div> Parent </div>
          <Son></Son>
        </div>
      )
  }
  
  //子组件
  function Son (props){
    return (
     <div>
        <div> Son </div>
        <Child></Child>
     </div>
    )
  }
  
  // 孙组件
  function Child(props){
     return (
      <Consumer>
        {
          value => <div>
           value:{value}
          </div>
        }
      </Consumer>
     )
  }
  
  ReactDom.render(
  <Provider value="1" >
    <Parent />
  </Provider>
  ,document.getElementById('root')
  )

思路：

1. 自己新建两个组件 Provider ， Consumer

2. Provider 有一个参数 value

3. 在 Provider 组件内遍历子组件

4. 如果组件是 Consumer 的话 ， 就返回一个组件，并将 value 作为值传递给新创建的子组件 Consumer