Context (中文翻译：上下文）， 当你不想在组件树中通过逐层传递 props 或者 state 方法来传递数据时，可以使用Context来实现跨层级的组件数据传递 。React.createContext 就是用于解决祖先组件与后代组件（中间隔了好多层组件）传值问题。

原本组件传递数据需要一层一层props传递，传递太过繁琐，例如以下代码：

import React from 'react'
function NeedData(props) {
    return <div>{props.value2}</div>;
// 中间组件
function Middle(props) {
    return (
            <NeedData value2={props.value} />
export default class FatherComponent extends React.Component {
    render() {
        return <Middle value="abcd" />;
createContext 解决无需按层级关系传递，原理如下：
 
 
1、createContext 创建一条索引，相当于开辟一个空间 ，可以配置默认参数，支持任何类型；createContext创建的对象包含 Provider 与 Consumer 组件。
 2、Provider提供的数据（方法）共享 ，传参使用value，且value 是固定写法默认,必填，写其它不生效。value接收的变量建议state中：每一次 Provider 重渲染时，consumers 组件将会重新渲染，因为value属性总被赋予新值；
 3、Consumer接收者，必须以函数方式获取；
 
通过 Provider传递数据，通过 Consumer接受数据
 
 以下代码演示了可以通过Provider来传递数据，通过Consumer 来接收数据，
 
import React, { Component, createContext } from 'react';
const MyContext = createContext(); //MyContext 自定义名称
//孙子组件
class GrandsonComponent extends Component {
    static contextType = secondContext
    render() {
        console.log(this.context)
        return (
                <MyContext.Consumer>
                    {value => <div>{value}</div>}
                </MyContext.Consumer>
//中间组件
class Middle extends Component {
    render() {
        return (
            <GrandsonComponent />
//顶级父组件
class TopComponent extends Component {
    onfunction() {
        return `数据`
    render() {
        return (
                <MyContext.Provider value='test'>
                     <Middle />
                </MyContext.Provider>
export default TopComponent 
 
Provider 接收一个 value 属性，传递给Consumer组件。一个 Provider 可以和多个Consumer组件有对应关系。多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据。
 
当 Provider 的 value 值发生变化时，它内部的所有Consumer组件都会重新渲染。Provider 及其内部 consumer 组件都不受制于 shouldComponentUpdate 函数，因此当 consumer 组件在其祖先组件退出更新的情况下也能更新。
 
                    当你不想在组件树中通过逐层传递 props 或者 state 方法来传递数据时，可以使用Context来实现跨层级的组件数据传递。React.createContext 就是用于解决祖先组件与后代组件（中间隔了好多层组件）传值问题。
				
React中，数据流是自顶向下的，如果兄弟组件通信，那就得先状态提升到父组件
但我们平时开发过程中，经常碰到组件树层级很深，如果不同层级的组件需要使用同一份数据，那从顶层组件分别传递props的方案肯定是很麻烦的
而且太深的props层级对后续进行维护追溯数据源来说也是不好的一种解决方式
因此context的使用场景就是：在组件树中，不同层级需要访问相同的数据源时，可以利用context，进行组件之间的通信
React.context
先看这么一个例子：
// context.js
impor
				
函数组件和类组件中React.createContext的使用
组成：两个页面文件 app.js 和 Tooltip.js；一个存放context的文件 indexContext.js
// indexContext.js
import React from 'react';
export const windowProp = {
    width: window.innerWidth,
    height: window.innerHeight
export const WindowProps
// 子类组件
function Counter() {
  const {count, setCount} = React.useContext(CounterContext)
				
哇，学如逆水行舟呀，本来写项目一直用react全家桶，像数据传递这种，不是用公共状态管理dva管理，就是用父子组件那种props传递，但是契机到了，就用到了这个React.createContext，然后发现一篇说的特别清楚的大佬，就是这篇：
使用createContext进行跨组件间数据传递方法
首先需要在父组件中定义一个容器和需要传递的默认值，然后通过Provider(生产者，简单来说就是定义数据的东西)，定义共享的数据，然后通过Consumer(消费者，就是子组件或孙子组件来使用)，具体实现代码如下
①：传统的父子组件传值，一个传一个，这样虽然能实现但是很麻烦。
②：就是react给我们提供了一个context，可以帮我们达到效果。context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。接下来看怎样使用。
使用之前我们需要知道里面的几个东西
①：childContextTypes(外层的组件使用的)
具体详见：context官方API
本篇文章只是详细的把我个人的学习日志给记录下来相当于又会了一个react相关的知识点，具体这些API可以参看官方API，已经写得很详细了；与context相关的API共有以下几个：
	React.createContext
	Context.Provider
	Class.contextType
	Context.Consumer