React(react18)中组件通信03——简单使用 Context 深层传递参数

React(react18)中组件通信03——简单使用 Context 深层传递参数

  • 1. 前言
    • 1.1 React中组件通信的其他方式
    • 1.2 引出 Context
  • 2. 简单例子
  • 3. 语法说明
    • 3.1 createContext(defaultValue)
    • 3.2 value
    • 3.3 useContext(SomeContext)
  • 4. 总结
    • 4.1 Context
      • 4.1.1 Context 小总结
      • 4.1.2 Context 应用场景
      • 4.1.3 Context-官网
    • 4.2 createContext
    • 4.3 useContext()
  • 5. 附代码

1. 前言

1.1 React中组件通信的其他方式

  • React(react18)中组件通信01——props.
  • React(react18)中组件通信02——消息订阅与发布、取消订阅以及卸载组件时取消订阅.

1.2 引出 Context

  • 需求场景:
    • 我们知道,如果父传子,可以通过props,如果子再传孙,还可以通过props,但是如果家族庞大,组件关系如果一颗大树,一直向下传递,这时候如果还用props,明显就显得有点费劲了。
      • 而且如果这个参数子不要孙要的情况,通过props逐层传递也不是很合理。
      • 再或者,如果这个后代离根太远了,如果还用props逐层传递下去,那么传递 props 会变的十分冗长和不便。
    • 这就需要考虑怎么能跳过中间代还能给后后代传递呢?这就需要接下来要介绍的Context了……
  • 使用 Context 可以深层传递参数,它可以在组件树不需要 props 将数据“直达”到所需的组件中,看官网介绍:
    在这里插入图片描述
    在这里插入图片描述

2. 简单例子

  • 先看实现的效果,如下是:爷爷组件给孙组件传消息:
    在这里插入图片描述
  • 代码设计——目录结构
    在这里插入图片描述
  • 代码设计——代码实现
    • context.js + App.js + index.js
      在这里插入图片描述
    • Parent.jsx + Child.jsx + GrandSon.jsx
      在这里插入图片描述

3. 语法说明

3.1 createContext(defaultValue)

  • 如下:
    在这里插入图片描述

3.2 value

  • value:该值为你想传递给所有处于这个 provider 内读取该 context 的组件,无论它们处于多深的层级。context 的值可以为任何类型。该 provider 内的组件可通过调用 useContext(SomeContext) 来获取它上面最近的 context provider 的 value

3.3 useContext(SomeContext)

  • 在组件的顶层调用 useContext 来读取和订阅 context。
    在这里插入图片描述

4. 总结

4.1 Context

4.1.1 Context 小总结

  • Context 使组件向其下方的整个树提供信息。
  • 传递 Context 的方法:
    • 通过 export const MyContext = createContext(defaultValue) 创建并导出 context。
    • 在无论层级多深的任何子组件中,把 context 传递给 useContext(MyContext) Hook 来读取它。
    • 在父组件中把 children 包在 <MyContext.Provider value={...}> 中来提供 context。
  • Context 会穿过中间的任何组件。
  • Context 可以让你写出 “较为通用” 的组件。
  • 在使用 context 之前,先试试传递 props 或者将 JSX 作为 children 传递。

4.1.2 Context 应用场景

  • 看官网介绍:
    在这里插入图片描述

4.1.3 Context-官网

  • 如下:
    https://zh-hans.react.dev/learn/passing-data-deeply-with-context.

4.2 createContext

  • 上下文使得组件能够无需通过显式传递参数的方式 将信息逐层传递。
  • 任何组件外调用 createContext 来创建一个或多个上下文。
    因为,通常,来自不同文件的组件都会需要读取同一个 context。因此,在一个单独的文件内定义 context 便成了常见做法。你可以使用 export 语句 将其导出,以便其他文件读取使用
  • 参考官网:
    https://zh-hans.react.dev/reference/react/createContext#createcontext.

4.3 useContext()

  • 如果 React 没有在父树中找到该特定 context 的任何 provider,useContext() 返回的 context 值将等于你在 创建 context 时指定的 默认值;
  • 注意,只有在 上层根本没有匹配的 provider 时才使用 createContext(defaultValue)调用的默认值。如果存在 <SomeContext.Provider value={undefined}> 组件在父树的某个位置,调用 useContext(SomeContext) 的组件 将会 接收到 undefined 作为 context 的值。
  • 参考官网:
    https://zh-hans.react.dev/reference/react/useContext.

5. 附代码

  • context.js

    /*** 1. 通常,来自不同文件的组件都会需要读取同一个 context。* 2. 因此,在一个单独的文件内定义 context 便成了常见做法。* 3. 你可以使用 export 语句 将其导出,以便其他文件读取使用*/
    import { createContext } from "react";const MessegeContext = createContext();export default MessegeContext;// import { createContext } from 'react';// export const ThemeContext = createContext('light');
    // export const AuthContext = createContext(null);
    
  • Parent.jsx

    import React from "react";
    import Child from "./Child";
    import './index.css'
    import { useState } from "react";
    import MessegeContext from "./context.js";function Parent() {const [notice, setNotice] = useState('孙子,你真棒!!');return(// <div className="parent">//     我是父组件!//     <div className="child">//         <Child notice={'通知——今天放假!'}/>//     </div>// </div>// 这里的属性,只能用 value<MessegeContext.Provider value={notice}><div className="parent">我是父组件!<div className="child"><Child notice={'通知——今天放假!'}/></div></div></MessegeContext.Provider>)
    }export default Parent;
    
  • Child.jsx

    import React from "react";
    import GrandSon from "./GrandSon";
    import './index.css'function Child(props){return(<div>我是子组件!!!<br /><br />收到来自于父组件的数据:{props.notice}<br /><br /><div className="grandSon"><GrandSon /></div></div>)
    }export default Child;
    
  • GrandSon.jsx

    import { useContext } from "react"
    import MessegeContext from "./context.js";export default function GrandSon(){// 在组件的顶层调用 useContext 来读取和订阅 context。const msgContent = useContext(MessegeContext);console.log(msgContent);return(<div>我是孙组件!!<br />我收到爷爷的信息是:{msgContent}</div>)
    }
    
  • componenet–>index.css

    .parent{background-color: blueviolet;border: 1px solid;height: 900px;width: 600px;text-align: center;
    }.child{background-color: green;height: 300px;margin: 20px;
    }.grandSon{background-color: grey;height: 150px;margin: 20px;
    }
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/139060.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解决方案| anyRTC远程检修应用场景

背景 在这个科技飞速发展的时代&#xff0c;各行各业都要求高效运转。然而&#xff0c;当出现问题时&#xff0c;我们却常常因为无法及时解决而感到困扰&#xff0c;传统解决问题的方式是邀请技术人员现场解决问题&#xff0c;如果技术人员解决不了&#xff0c;还要邀请专家从…

23年下考前须知-软考中级信息安全工程师

信息安全工程师主要涉及计算机信息安全方面&#xff0c;在计算机软硬件、网络、应用相关领域从事安全系统设计、安全产品开发、产品集成、信息系统安全检测与审计等方面工作&#xff0c;服务单位可以是国家机关、企事业单位及科研教学单位等。 一、考试报名时间 信安考试一年…

《深度学习工业缺陷检测》专栏介绍 CSDN独家改进实战

&#x1f4a1;&#x1f4a1;&#x1f4a1;深度学习工业缺陷检测 1&#xff09;提供工业小缺陷检测性能提升方案&#xff0c;满足部署条件&#xff1b; 2&#xff09;针对缺陷样品少等难点&#xff0c;引入无监督检测&#xff1b; 3&#xff09;深度学习 C、C#部署方案&#…

若依cloud -【 100 ~ 】

100 分布式日志介绍 | RuoYi 分布式日志就相当于把日志存储在不同的设备上面。比如若依项目中有ruoyi-modules-file、ruoyi-modules-gen、ruoyi-modules-job、ruoyi-modules-system四个应用&#xff0c;每个应用都部署在单独的一台机器里边&#xff0c;应用对应的日志的也单独存…

doxygen c++ 语法

c基本语法模板 以 /*! 开头, */ 结尾 /*!\关键字1\关键字2 */1 文件头部信息 /*! \file ClassA.h* \brief 文件说明 定义了类fatherA* \details This class is used to demonstrate a number of section commands.* \author John Doe* \author Jan Doe* \v…

虚拟机部署linux网络连接配置

1、虚拟机安装linux后&#xff0c;配置网络访问 虚拟机网络设置为NAT模式 linux网络配置好IP&#xff0c;主要是以下网络配置 2、linux没有ifconfig命令&#xff0c;ifconfig命令是在net-tools.x86_64包里 yum install net-tools.x86_64安装

【校招VIP】专业课考点之TCP连接

考点介绍&#xff1a; 在TCP&#xff0f;IP中&#xff0c;TCP协议通过三次握手来建立连接&#xff0c;从而提供可靠的连接服务。本专题主要介绍一线互联网大厂面试关于TCP连接的相关问题。 专业课考点之TCP连接-相关题目及解析内容可点击文章末尾链接查看&#xff01; 一、考…

八大排序(四)--------直接插入排序

本专栏内容为&#xff1a;八大排序汇总 通过本专栏的深入学习&#xff0c;你可以了解并掌握八大排序以及相关的排序算法。 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;八大排序汇总 &#x1f69a;代码仓库&#xff1a;小小unicorn的代码仓库…

uniappAndroid平台签名证书(.keystore)生成

一、安装JRE环境 https://www.oracle.com/java/technologies/downloads/#java8 记住下载默认安装地址。ps&#xff1a;我都默认安装地址C:\Program Files\Java\jdk-1.8 二、安装成功后配置环境变量 系统变量配置 AVA_HOME 放到环境变量去 %JAVA_HOME%\bin 三、生成签名证书…

【开发篇】二、属性绑定与校验

文章目录 1、ConfigurationProperties自定义Bean属性绑定2、EnableConfigurationProperties注解3、ConfigurationProperties第三方Bean属性绑定4、松散绑定5、常用计量单位6、数据校验7、yaml绑定值的坑--关于进制 1、ConfigurationProperties自定义Bean属性绑定 前面读取yaml…

【Python Fastapi】js上传文件,fastapi处理,js显示回传信息

python from fastapi import FastAPI, File, UploadFile, HTTPException from fastapi.staticfiles import StaticFiles from fastapi.responses import HTMLResponse from typing import List import requestsapp FastAPI()# 配置静态文件目录 app.mount("/static"…

【深度学习实验】前馈神经网络(四):自定义逻辑回归模型:前向传播、反向传播算法

目录 一、实验介绍 二、实验环境 1. 配置虚拟环境 2. 库版本介绍 三、实验内容 0. 导入必要的工具包 1. 逻辑回归Logistic类 a. 构造函数__init__ b. __call__(self, x)方法 c. 前向传播forward d. 反向传播backward 2. 模型训练 3. 代码整合 一、实验介绍 实现逻…

YOLOv5、YOLOv8改进:Decoupled Head解耦头

目录 1.Decoupled Head介绍 2.Yolov5加入Decoupled_Detect 2.1 DecoupledHead加入common.py中&#xff1a; 2.2 Decoupled_Detect加入yolo.py中&#xff1a; 2.3修改yolov5s_decoupled.yaml 1.Decoupled Head介绍 Decoupled Head是一种图像分割任务中常用的网络结构&#…

MySQL进阶 —— 超详细操作演示!!!(中)

MySQL进阶 —— 超详细操作演示&#xff01;&#xff01;&#xff01;&#xff08;中&#xff09; 三、SQL 优化3.1 插入数据3.2 主键优化3.3 order by 优化3.4 group by 优化3.5 limit 优化3.6 count 优化3.7 update 优化 四、视图/存储过程/触发器4.1 视图4.2 存储过程4.3 存…

阿里云大数据实战记录10:Hive 兼容模式的坑

文章目录 1、前言2、什么是 Hive 兼容模式&#xff1f;3、为什么要开启 Hive 模式&#xff1f;4、有什么副作用&#xff1f;5、如何开启 Hive 兼容模式&#xff1f;6、该场景下&#xff0c;能不能不开启 Hive 兼容模式&#xff1f;7、为什么不是DATE_FORMAT(datetime, string)&…

【Qt-17】Qt调用matlab生成的dll库

matlab生成dll库 1、matlab示例代码 function BDCube(x,y)[x,y,z] cylinder(x,y);t1 hgtransform;s1 surf(3*x,3*y,4*z,Parent,t1);grid onview(3)shading interp end 2、matlab环境配置 首先检查自己的mcc编译器是否可用&#xff0c;输出以下命令&#xff1a; &#x…

如何在没有第三方.NET库源码的情况,调试第三库代码?

大家好&#xff0c;我是沙漠尽头的狼。 本方首发于Dotnet9&#xff0c;介绍使用dnSpy调试第三方.NET库源码&#xff0c;行文目录&#xff1a; 安装dnSpy编写示例程序调试示例程序调试.NET库原生方法总结 1. 安装dnSpy dnSpy是一款功能强大的.NET程序反编译工具&#xff0c;…

【Java 基础篇】Java线程安全与并发问题详解

多线程编程在Java中是一个常见的需求&#xff0c;它可以提高程序的性能和响应能力。然而&#xff0c;多线程编程也带来了一系列的线程安全与并发问题。在本文中&#xff0c;我们将深入探讨这些问题&#xff0c;以及如何解决它们&#xff0c;适用于Java初学者和基础用户。 什么…

【AI视野·今日NLP 自然语言处理论文速览 第三十六期】Wed, 20 Sep 2023

AI视野今日CS.NLP 自然语言处理论文速览 Wed, 20 Sep 2023 Totally 64 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers SlimPajama-DC: Understanding Data Combinations for LLM Training Authors Zhiqiang Shen, Tianhua Tao, Li…

原生js值之数据类型详解

js的数据类型 数据类型分类基本数据类型boolean:布尔类undefined:未定义的值null类型数值转换 NumberparseInt 转换整数 parseFloat转换浮点数 String类型特点如何转换成字符串模板字面量字符串插值模板字面量标签函数 symbol类型特性使用 BigInt类型复杂数据类型Object类属性与…