react 中Context的作用

react中Context 的使用

在react组件开发中,父组件给子组件传参,我们会用props传递,如果父组件想给子组件内的子孙组件、或者更深层级的组件直接传参呢

Context的概念

一种组件间的通信方式,常用于【祖组件】【后代组件】间的通信

使用

//创建Context容器(以创建一个HomeContext为例,下面示例都为HomeContext) const HomeContext = React.createContext(); //渲染子组件时,外面包裹homecontext.Provider,通过value属性传递给后代组件 <HomeContext.Provider> <div>子组件内容</div> </HomeContext.Provider> //后代组件读取数据 /** * 第一种方式(只能使用于类式组件) * */ static contextType = HomeContext //声明接收context this.context //读取context内容 /** * 第二种方式(函数组件与类组件都可使用) */ <HomeContext.Consumer> { value =>()//value为context中的值 } </HomeContext.Consumer>
例如,Home组件中嵌套了A,A组件嵌套B组件,B组件中又嵌套了C,Home组件使用Context传参到其他组件
import React, { Component} from 'react'

//创建Context对象
const HomeContext = React.createContext();
//解构赋值拿到Provider,Consumer
const {Provider,Consumer} = HomeContext;
export default class Home extends Component {
    state = {name:'我是Home组件传递的参数'}
    render() {
        return (
            <div className="home">
                我是Home组件
                <Provider value={this.state.name}>
                    <A />
                </Provider>
                
            </div>
        )
    }
}
class A extends Component {
    render(){
        return (
            <div className="component_a">
                我是A组件
                <B />
            </div>
        )
    }
}
//B组件使用Consumer 接收Home组件传递过来的参数
class B extends Component {
    render(){
        return (
            <div className="component_b">
                我是B组件
                <Consumer>
                    {
                        value =>{
                            return <p>{value }</p>
                        }
                    }
                </Consumer>
                <C />
            </div>
        )
    }
}
//C组件使用声明接收方式
class C extends Component {
    //使用静态属性 声明接收HomeContext 
    static contextType = HomeContext;
    render(){
        console.log(this);
        return (
            <div className="component_c">
                我是C组件
                <p>{this.context}</p>
            </div>
        )
    }
}

QQ截图20210405223041.png

注意

在应用开发中,我们一般不使用context,一般用它封装reat插件