我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

苏南大叔在前面的文章里面写了,contextprops更加高明好用的地方,就是多层组件传值的时候,写法更加简单实用。那么,本文就来看看,react项目中的上下文到底如何使用。

苏南大叔:react教程,如何使用 context 实现组件多层嵌套传值? - 组件嵌套传值
react教程,如何使用 context 实现组件多层嵌套传值?(图5-1)

大家好,苏南大叔的程序如此灵动博客,记录苏南大叔的代码点滴。本文描述在函数式组件或者类式组件里面,如何实现context上下文传值。测试环境:create-react-app@5.0.1node@16.14.2react@18.2.0react-dom@18.2.0

基本定义

import React, { createContext, useContext, PureComponent } from "react";
const hostContext = createContext({ "name": "sunan大叔" });

苏南大叔:react教程,如何使用 context 实现组件多层嵌套传值? - 上下文demo截图
react教程,如何使用 context 实现组件多层嵌套传值?(图5-2)

函数式组件使用useContext

这个最简单,使用useContext()就拿到了值。

const Sunan1 = () => {
    const host = useContext(hostContext)
    return <p>{host.name}</p>;
};

这个略微复杂,使用了一个<context变量.Consumer>,略微烧脑。

function Sunan2() {
    return <hostContext.Consumer>
        {host => <p>{host.name}</p>}
    </hostContext.Consumer>;
}

苏南大叔:react教程,如何使用 context 实现组件多层嵌套传值? - 第一种写法
react教程,如何使用 context 实现组件多层嵌套传值?(图5-3)

类式组件使用this.context

这个地方使用static contextType = ;建立联系。

class Sunan3 extends React.Component {
    static contextType = hostContext;
    render() {
        const host = this.context;
        return <p>{host.name}</p>;
    }
}

这个是在组件外部,通过 .contextType = 建立联系:

class Sunan4 extends PureComponent {
    render() {
        const host = this.context;
        return (<p>{host.name}</p>);
    }
}
Sunan4.contextType = hostContext;

苏南大叔:react教程,如何使用 context 实现组件多层嵌套传值? - 子组件代码2
react教程,如何使用 context 实现组件多层嵌套传值?(图5-4)

打包组件不影响传值

这个就是contextprops先进的地方,随便嵌套。

const SunanGroup1 = () =>{
    return <>
        <Sunan1 />
        <Sunan3 />
    </>;
}

Provider包裹

使用<Context变量.Provider value={Context取值}></Context变量.Provider>包裹的组件,都可以取到通过value传递的context值。

const Sunan = () => {
    const host = { "name": "苏南大叔" };
    return (
        <div>
            <hostContext.Provider value={host}>
                <Sunan1 />
                <Sunan2 />
                <Sunan3 />
                <Sunan4 />
                <SunanGroup1 />
            </hostContext.Provider>
            <Sunan2 />
        </div>
    );
};
export default Sunan;

苏南大叔:react教程,如何使用 context 实现组件多层嵌套传值? - 组件嵌套多层代码
react教程,如何使用 context 实现组件多层嵌套传值?(图5-5)

没有被Provider包裹的变量,会取到createContext中的默认值。比如最后的那个游离在Prodiver之外的Sunan2子组件,虽然代码一致,但是它的context取值就不一样。

结束语

不用怀疑createContext中的默认值,它是用于没有使用Provider包裹的时候,组件有个默认值的。而且在传值角度上来说,context确实要比props好用。

Context重点是解决组件间传值的问题,而redux的作用是统一管理应用状态。而实际上两者到底有啥区别呢?苏南大叔觉得,Contextreact提出的数据解决方案,而redux是个第三方的方案。以后的文章里面,再去对比两者区别。

更多react相关经验文章,请点击苏南大叔的博客:

助理微信

微信打赏码

微信公众号

微信小程序

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   react