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 (
            <>
                <Provider value='我是要传递的值！'>
                    <h2>父组件</h2>
                    <Son />
                </Provider>
            </>
        )
    }
}

子组件：Son.js

import React, { Component } from 'react'

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

export default class Son extends Component {
    render() {
        return (
            <div>
                <Consumer>
                    {
                    	// 回调函数，第一个参数（自定义）可以取到父组件注入的值。
                        (name) =>
                            <>
                                <hr />
                                <h2>子组件</h2>
                                <p> 获取父组件的值:{name}</p>
                                <Grandson />
                            </>
                    }
                </Consumer>
            </div>
        )
    }
}

孙组件：grandson.js

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

export default class Grandson extends Component {
    render() {
        return (
            <div>
                <Consumer>
                    {
                        (name) => {
                        	//较于子组件的回调，我这里用了另一种，也可以实现。
                            return (
                                <>
                                    <hr />
                                    <h3>孙组件</h3>
                                    <p>获取爷组件的值:{name}</p>
                                </>
                            )
                        }
                    }
                </Consumer>
            </div>
        )
    }
}

（–九月萩）

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

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