react Context的使用，清晰明了

前言

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。

简单的说，就是在组件定义context，组件内的内部组件 子孙所有组件都可以访问这个数据

写法1，单个context Father.jsx

import React,{Component} from 'react'
import Children from './Children'
export const {Provider,Consumer} = React.createContext();
export default class Father extends Component{
    constructor(props){
        super(props)
        this.state={
          name: '零三'
        }
        this.child = null
    }
  setName(){
      this.setState({name: '零零三'})
  }
    render (){
        return (
            
              {this.state.num}
              {this.state.num}
              
                context值：{this.state.name}
                this.setName()}>修改name值
                
              
            
        )
    }
}

Childern.jsx

import React,{Component} from 'react'
import Grandson from './Grandson'
import { Consumer } from "./Father";//引入Consumer容器的组件
export default class Children extends Component{
    constructor(props){
        super(props)
        this.state={
        }
    }
    render (){
        return (
            
              
                {( name ) => 子组件获取context:{name}}
              
              
            
        )
    }
}

Grandson.jsx

import React,{Component} from 'react'
import { Consumer } from "./Father";//引入Consumer容器的组件
export default class Grandson extends Component{
    constructor(props){
        super(props)
        this.state={
        }
    }
    render (){
        return (
            
              
              {( name ) => 孙组件获取context:{name}}
              
            
        )
    }
}

写法2，多个context Father.jsx

import React,{Component, Suspense} from 'react'
import Children from './Children'
const ConditionRender = React.lazy(()=>import('./ConditionRender'))
export const ThemeContext = React.createContext();
export const UserContext = React.createContext();
export default class  extends Component{
    constructor(props){
        super(props)
        this.state={
          signedInUser: {
            name: '零四'
          },
          theme: 'dark'
        }
    }
    render (){
        return (
            
              {this.state.num}
              {this.state.num}
              {/*在Father以下的所有组件都可以获取值*/}
              
                
                  context值：{this.state.theme}
                  { this.child = ref}}>
                
              
            
        )
    }
}

Childern.jsx

import React,{Component} from 'react'
import Grandson from './Grandson'
import { ThemeContext,UserContext } from "./Father";//引入父组件的Consumer容器
export default class Children extends Component{
    constructor(props){
        super(props)
        this.state={
        }
    }
    render (){
        return (
            
              
                {theme => (
                  子组件获取theme context:{theme}
                )}
              
              
                {user => 
                  子组件获取theme context:{user.name}
                
                }
              
              
            
        )
    }
}

Grandson.jsx

import React,{Component} from 'react'
import { ThemeContext,UserContext } from "./Father";//引入父组件的Consumer容器
export default class Grandson extends Component{
    constructor(props){
        super(props)
        this.state={
        }
    }
    render (){
        return (
            
              
                {theme => (
                  孙组件获取theme context:{theme}
                )}
              
              
                {user => 
                  孙组件获取theme context:{user.name}
                
                }
              
            
        )
    }
}