React.createContext 的使用说明--用于解决多级组件的传值问题

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

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

import React from 'react'
function NeedData(props) {
    return <div>{props.value2}</div>;
}
// 中间组件
function Middle(props) {
    return (
        <div>
            <NeedData value2={props.value} />
        </div>
    );
}

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 (
            <div>
                <MyContext.Consumer>
                    {value => <div>{value}</div>}
                </MyContext.Consumer>
            </div>
        )
    }
}
//中间组件
class Middle extends Component {
    render() {
        return (
            <GrandsonComponent />
        )
    }
}
//顶级父组件
class TopComponent extends Component {
    onfunction() {
        return `数据`
    }
    render() {
        return (
            <div>
                <MyContext.Provider value='test'>
                     <Middle />
                </MyContext.Provider>
            </div>
        )
    }
}
export default TopComponent 

Provider 接收一个 value 属性，传递给Consumer组件。一个 Provider 可以和多个Consumer组件有对应关系。多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据。

当 Provider 的 value 值发生变化时，它内部的所有Consumer组件都会重新渲染。Provider 及其内部 consumer 组件都不受制于 shouldComponentUpdate 函数，因此当 consumer 组件在其祖先组件退出更新的情况下也能更新。