React中的connect使用(Provider+Consumer例子 以及 contextType+this.context例子)

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 (
            
                

                    
父组件
                    
                
            
        );
    }
}

Son.jsx

import React from 'react';
import Grandson from "./grandson.js";//引入子组件
function Son(props) {
    return (
        

            哈哈哈哈
            
        
    );
}
export default Son;

grandson.jsx

import React from 'react';
import { Consumer } from "./App.js";
function Grandson() {
    return (
        
            {(name ) =>
                   

                   
孙组件。获取祖父传递下来的值:{name}
               
            }
        
    );
}
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 (
      
        
      
    );
  }

}

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 
    }
  }

export default Son;

grandson.js

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

//声明一个孙组件
class Son extends Component {
    static contextType = commonContext;
    render() {
      return
{this.context}
    }
}
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 只能有一个