React组件通过Context通讯

Context上下文

• 1.如果传递数据层次太深, 一层一层的传递比较麻烦, 所以React也提供了其它的解决方案
  • 1.1 通过context上下文传递
  • 1.2 通过Redux传递 (相当于Vuex)
  • 1.3 通过Hooks传递 (相当牛X)
• 2. 如何通过context上下文来传递数据
  • 2.1调用创建上下文的方法, 只要我们调用了创建上下文的方法, 这个方法就会给我们返回两个容器组件：生产者容器组件(Provider) / 消费者容器组件(Consumer)
  • 2.2只要拿到了这两个容器组件, 那么我们就可以通过这两个容器组件从祖先传递数据给所有的后代了
  • 2.3首先在祖先组件中利用 '生产者容器组件' 包裹后代组件
  • 2.4然后在后代组件中利用 '消费者容器组件' 获取祖先组件传递过来的数据即可

context的3种使用方法
方法一
1.创建一个上下文对象

const AppContext = React.createContext({});

2.从上下文对象中获取容器组件
Provider: 生产者容器组件, 专门用于负责生产数据，接收对象生产数据value={{name:"sjl"}}
Consumer: 消费者容器组件, 专门用于消费生产者容器组件生产的数据的,接收回调函数,包含需要用到数据的组件
容器组件 : 专门用于包裹其它组件的组件, 我们就称之为容器组件
接收context对象

const {Provider, Consumer} = AppContext;

class Son extends React.Component{
    render(){
        return (
            <Consumer>
                {
                    (value)=>{
                        return (
                            <div>
                                <p>{value.name}</p>
                                <p>{value.age}</p>
                            </div>
                        )
                    }
                }
            </Consumer>
        )
    }
}
class Father extends React.Component{
    render(){
        return (
            <div>
                <Son></Son>
            </div>
        )
    }
}
class App extends React.Component{
    render(){
        return (
/*我们可以在生产者容器组件中通过value来生产数据*/
            <Provider value={{name:'sjl', age:20}}>
                <Father></Father>
            </Provider>
        )
    }
}
export default App;

方法二:直接创建时传参
1.创建一个上下文对象并直接传递数据

const AppContext = React.createContext({
    name:'单佳兰',
    age: 20
});

2.指定当前组件的上下文

Son.contextType = AppContext;

import React from 'react';
// 1.创建一个上下文对象
const AppContext = React.createContext({
    name:'单佳兰',
    age: 20
});
class Son extends React.Component{
    render(){
        return (
            <div>
                {/*3.从当前组件的上下文中消费数据*/}
                <p>{this.context.name}</p>
                <p>{this.context.age}</p>
            </div>
        )
    }
}
// 2.指定当前组件的上下文
Son.contextType = AppContext;
class Father extends React.Component{
    render(){
        return (
            <div>
                <p>{this.context.name}</p>
                <p>{this.context.age}</p>
                <Son></Son>
            </div>
        )
    }
}
Father.contextType = AppContext;
class App extends React.Component{
    render(){
        return (
            // 3.使用生产者生产数据
            <div>
                <Father></Father>
            </div>
        )
    }
}
export default App;

缺陷：只能使用一个context创建所包含的数据，于是有了方法三

方法三：包含多个生产者和消费者的情况

import React from 'react';
//定义多个context上下文传递数据
const AppContext1 = React.createContext({});
const AppContext2 = React.createContext({});
class Son extends React.Component{
    render(){
        return (
            <AppContext1.Consumer>
                {
                    (value)=>{
                        return (
                            <AppContext2.Consumer>
                                {
                                    (value2)=>{
                                        return (
                                            <div>
                                                <p>{value.name}</p>
                                                <p>{value.age}</p>
                                                <p>{value2.gender}</p>
                                            </div>
                                        )
                                    }
                                }
                            </AppContext2.Consumer>
                        )
                    }
                }
            </AppContext1.Consumer>
        )
    }
}
// 注意: 如果有多个生产者, 那么不能通过这种方式来消费
// Son.contextType = AppContext1;
// Son.contextType = AppContext2;
class Father extends React.Component{
    render(){
        return (
            <div>
                <Son></Son>
            </div>
        )
    }
}
class App extends React.Component{
    render(){
        return (
            <AppContext1.Provider value={{name:'sjl', age:20}}>
                <AppContext2.Provider value={{gender:'femal'}}>
                    <Father></Father>
                </AppContext2.Provider>
            </AppContext1.Provider>
        )
    }
}
export default App;

缺陷：只能通过从上往下传递数据，不能从下往上（回调函数），也不能是想同级之间（回调函数）的通讯，如果层级比较深，则很麻烦，则有了下面的events库来解决这个问题，让小单下一节来更新这个小知识点吧~
越发渴望，越发沉溺.当不报任何期待的时候，也许就是水到渠成之时，小单加油~2023来啦