初识Context

初识Context
我们知道，在JS中context指的是函数的执⾏上下⽂，函数被调⽤时，this指向谁，谁就是当前的执⾏上下⽂；
react中的context是什么呢？官⽅⽂档给出：
Context 通过组件树提供了⼀个传递数据的⽅法，从⽽避免了在每⼀个层级⼿动的传递 props 属性。
⽂档也没具体给出context到底是什么，⽽是告诉我们context能⼲什么，也就是说，如果我们不想通过props实现组件树的逐层传递
数据，则可以使⽤context实现跨层级进⾏数据传递！
如何使⽤Context
context api给出三个概念：React.createContext()、Provider、Consumer；
React.createContext()
这个⽅法⽤来创建context对象，并包含Provider、Consumer两个组件 <Provider />、<Consumer />
const {Provider, Consumer} = React.createContext();
Provider
数据的⽣产者，通过value属性接收存储的公共状态，来传递给⼦组件或后代组件
eg:
<Provider value={/* some value /}>
Consumer
数据的消费者，通过订阅Provider传⼊的context的值，来实时更新当前组件的状态
eg:
<Consumer>
{value => / render something based on the context value */}
</Consumer>
值得⼀提的是每当Provider的值发⽣改变时, 作为Provider后代的所有Consumers都会重新渲染
props单向数据流动：
如果觉得Props传递数据很繁琐，可以采⽤context,进⾏跨组件传递数据
再最外层的组件上，通过⽣产者Provider组件进⾏包裹，并存储共享数据到value中，当然可以是任何数据类型。后带需要⽤到共享数
据的组件均可通过Consumer进⾏数据获取。