React Context使用

注意：
以下内容大部分内容根据官方文档进行的，由于技术在不断更新，一切以官方文档为准。

说明：
Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。

何时使用：
共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言。

API:

1. React.createContext（容器）

createContext（默认值），创建一个context。
context内包含了 Provider、Consumer。
使用的时候需要把它们两个解构出来。

import React, { createContext } from 'react'
const { Provider, Consumer } = createContext('默认名称')

2. Provider(生产者)
3. Consumer(消费者)

示例：
父组件：Father.js

import React, { Component , createContext} from 'react'
//下面这行抛出是为了Father下的子组件可以从这里引入
export const {Provider,Consumer} = createContext("默认名称");
//以上两行写法，是我个人比较习惯的，接下来注释的两行是另一种写法。
//import React from 'react';
//export const {Provider,Consumer} = React.createContext("默认名称");
import Son from './son'


export default class Father extends Component {
    render() {
        return (
            <>
                
                    
父组件
                    
                
            
        )
    }
}

子组件：Son.js

import React, { Component } from 'react'

//引入父组件的Consumer容器
import { Consumer } from './father'
import Grandson from './grandson'

export default class Son extends Component {
    render() {
        return (
            

                
                    {
                        // 回调函数，第一个参数（自定义）可以取到父组件注入的值。
                        (name) =>
                            <>
                                

                                
子组件
                                
 获取父组件的值:{name}
                                
                            
                    }
                
            
        )
    }
}

孙组件：grandson.js

import React, { Component } from 'react'
import { Consumer } from './father'

export default class Grandson extends Component {
    render() {
        return (
            

                
                    {
                        (name) => {
                            //较于子组件的回调，我这里用了另一种，也可以实现。
                            return (
                                <>
                                    

                                    
孙组件
                                    
获取爷组件的值:{name}
                                
                            )
                        }
                    }
                
            
        )
    }
}

（九月萩）

在学习过程中，不仅多谢官方文档的帮助，还有以下的帮助，谢谢各位的分享。

《React Context(上下文) 作用和使用 看完不懂 你打我》
《React 中 Context》