React16.x之后使用新的context

解决 多层数据传递时，一层层props传递的麻烦

常用api

React.createContext()、Provider、Consumer

Provider+Consumer例子

App.jsx

import React from 'react';
import Son from './son';
export const {Provider,Consumer} = React.createContext("默认值");
export default class App extends React.Component {
    render() {
        let name ="张三"
        return (
            <Provider value={name}>
                <div style={{border:'1px solid red',width:'30%',margin:'50px auto',textAlign:'center'}}>
                    <p>父组件</p>
                    <Son/>
                </div>
            </Provider>
        );
    }
}

Son.jsx

import React from 'react';
import Grandson from "./grandson.js";//引入子组件
function Son(props) {
    return (
        <div style={{ border: '1px solid blue', width: '60%', margin: '20px auto', textAlign: 'center' }}>
            哈哈哈哈
            <Grandson />
        </div>
    );
}
export default Son;

grandson.jsx

import React from 'react';
import { Consumer } from "./App.js";
function Grandson() {
    return (
        <Consumer>
            {(name ) =>
                   <div style={{border:'1px solid green',width:'60%',margin:'50px auto',textAlign:'center'}}>
                   <p>孙组件。获取祖父传递下来的值:{name}</p>
               </div>
            }
        </Consumer>
    );
}
export default Grandson;

思想：
React.createContext会生成对应的Provider,Consumer组件，
传递数据的是Provider，Provider通过value属性进行传递数据
接收数据的是Consumer，Consumer是一个函数，通过参数，得到传递的数据
如果子组件找不到父辈组件被Provider 包裹，createContext("默认值"）生效
Provider可以多层嵌套，子组件取值从最近的开始
一个Provider 可以对应多个Consumer

Provider+contextType+this.context

App.js

import React, { Component } from 'react';
import Son from './son'
import {commonContext} from './context.js'

class App extends Component {
  render() {
    return (
      <commonContext.Provider value="我是共有的">
        <Son />
      </commonContext.Provider>
    );
  }

}

export default App;

context.js

import { createContext } from 'react';
export const commonContext = createContext();

son.js

import React, { Component } from 'react';
import GrandSon from "./grandson.js";
class Son extends Component {
    render() {
      return <GrandSon />
    }
  }

export default Son;

grandson.js

import React, { Component } from 'react';
import { commonContext } from './context.js'

//声明一个孙组件
class Son extends Component {
    static contextType = commonContext;
    render() {
      return<h1>{this.context}</h1>
    }
}
export default Son;

曾经的循环引用错误
Cannot access 'AppContext' before initialization
没定义context.js,造成了App.js中间接引用了孙子，孙子中引用了App.js中的export const commonContext = createContext();
思想：
跟组件通过Provider 的value 传递数值，消费的类组件，用static contextType = commonContext; 接受后，就可以使用this.context 获取Provider 的value值

contextType 只能在类组件中使用
一个组件如果有多个 consumer ， contextType 只对其中一个有效，所以说，contextType 只能有一个