在React中，一般组件传递数据都是通过props自上而下（由父到子）进行传递，但是对于一些特定属性而言，或者组件层级嵌套过深，那么这种传递方式就显得繁琐。Context就是提供了一个类似“全局”的数据，可以绕过组件一层层传递，从而提供便捷方式。

什么是Context

官方说法是：Context提供了一个无需为每层组件手动添加props，就能在组件树间进行数据传递的方法。

例如上图，左边就是普通父子组件一层层通过props传递数据的方法。右边则是使用了Context之后，无需通过props层层传递，即直接拿到顶层定义的数据。

Context使用方法


 //0.通过引入createContext
import React,{Component,createContext} from 'react'

 //1.通过执行createContext后用一个变量接受，createContext函数可以传参数，参数就是默认值。
const BatteryContext = createContext()

class Lef extends Component{
  render() {
    return (
       //3.通过Consumer里面接受一个jsx回调函数获取数据
      <BatteryContext.Consumer>
        {
          battery => <h1>Battery:{battery}</h1>
        }
      </BatteryContext.Consumer>
    )
  }
}

class Middle extends Component {
  render() {
    return (
      <Lef></Lef>
    )
  }
}

class App extends Component{
  state = {
    count:2
  }
  render() {
    const { count } = this.state;
    return (
       //2.通过Provider创建数据
      <BatteryContext.Provider value={count}>
        <Middle></Middle>
       </BatteryContext.Provider>
     )
   }
}

除了以上比较复杂的API方法之外，官方还提供了另一种写法，那就是contextType。


class Lef extends Component{
  static contextType = BatteryContext;
  render() {
    const battery = this.context;
    return (
         <h1>Battery:{battery}</h1>
    )
  }
}

不过这种写法只适用于class创建的组件中，函数式组件由于没有静态变量这种特性暂时无法支持。