五、【React拓展】Context

一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信
点击访问官网 Context

1、写在前面的使用总结

1) 创建Context容器对象：
	const XxxContext = React.createContext()  
	
2) 渲染子组时，外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据：
	{/* Provider 的属性名是写死的，就是value，值可以随便传 */}
	<xxxContext.Provider value={数据}>
		子组件
    </xxxContext.Provider>
    
3) 后代组件读取数据：

	//第一种方式:仅适用于类组件 
	  static contextType = xxxContext  // 声明接收context（必须声明，不然不给context值）
	  this.context // 读取context中的value数据
	  
	//第二种方式: 函数组件与类组件都可以
	  <xxxContext.Consumer>
	    {
	      value => ( // value就是context中的value数据
	        要显示的内容
	      )
	    }
	  </xxxContext.Consumer>

2、注意

• 在应用开发中一般不用context, 一般都用它的封装react插件

3、类式 Demo

3.1、CODE

import React, { Component, createContext } from 'react'

// 创建Context对象
const MyContext = createContext()

export default class A extends Component {

    state = {
        name: '张三'
    }

    render() {
        const { name } = this.state
        return (
            <div style={{
                background: 'orange',
                padding: 10
            }}>
                <h2>这是A组件</h2>
                <h4>A组件用户名是：{name}</h4>
                {/* Provider 的属性名是写死的，就是value，值可以随便传 */}
                <MyContext.Provider value={name}>
                    <B />
                </MyContext.Provider>
            </div>
        )
    }
}

class B extends Component {
    render() {
        return (
            <div style={{
                background: 'skyblue',
                padding: 10
            }}>
                <h2>这是B组件</h2>
                <C />
            </div>
        )
    }
}

class C extends Component {

    // 声明我要获取MyContext的值（必须声明，不然不给context）
    static contextType = MyContext

    render() {
        return (
            <div style={{
                background: 'gray',
                padding: 10
            }}>
                <h2>这是C组件</h2>
                <h4>B从A组件接收到的用户名是：{this.context}</h4>
            </div>
        )
    }
}

3.2、Result

4、函数式 Demo

4.1、CODE

直接修改上面的Demo中的C组件

function C() {
    return (
        <div style={{
            background: 'gray',
            padding: 10
        }}>
            <h2>这是C组件</h2>
            <MyContext.Consumer>
                {
                    value => <h4>B从A组件接收到的用户名是：{value}</h4>
                }
            </MyContext.Consumer>
        </div>
    )
}

4.2、Result

• 桶3.2，略…