react Context学习记录

news2024/12/23 16:58:25

react Context学习记录

  • 1.Context是干嘛的
  • 2.可以倒是可以实现的做法-props逐级传递
  • 3.Context

1.Context是干嘛的

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

2.可以倒是可以实现的做法-props逐级传递

import React, { Component } from "react";
import "./index.css";

export default class A extends Component {
  state = { username: "tom", age: 18 };
  render() {
    const { username, age } = this.state;
    return (
      <div className="parent">
        <h3>我是A组件</h3>
        <h4>我的用户名是:{username}</h4>
        <B username={username} age={age}></B>
      </div>
    );
  }
}

class B extends Component {
  render() {
    console.log(this.props);
    const { username, age } = this.props;
    return (
      <div className="child">
        <h3>我是B组件</h3>
        <C username={username} age={age} />
      </div>
    );
  }
}

function C(props) {
	const { username, age } = props;
  return (
    <div className="grand">
      <h3>我是C组件</h3>
      <h4>
        我从A组件接收到的用户名:{username},年龄是{age}
      </h4>
    </div>
  );
}

这里C组件用了下函数式组件的写法
在这里插入图片描述
但是这种写法有很多的不太好的地方,如果层级再深一点呢,传的值再多一点呢。肯定会有很多的重复代码出现,而且我只想要祖组件和孙组件通信,这样写的话其实是每个组件都在通信了的

3.Context

Context的就可以挺好的适用于这种场景

  1. 创建Context容器对象:
    const XxxContext = React.createContext()
    2) 渲染子组时,外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据:
    <xxxContext.Provider value={数据}>
    子组件
    </xxxContext.Provider>
    3) 后代组件读取数据:
    //第一种方式:仅适用于类组件
    static contextType = xxxContext // 声明接收context
    this.context // 读取context中的value数据
    //第二种方式: 函数组件与类组件都可以
    <xxxContext.Consumer>
    {
    value => ( // value就是context中的value数据
    要显示的内容
    )
    }
    </xxxContext.Consumer>

上代码

import React, { Component } from "react";
import "./index.css";

//创建Context对象
const MyContext = React.createContext();
const { Provider, Consumer } = MyContext;
export default class A extends Component {
  state = { username: "tom", age: 18 };

  render() {
    const { username, age } = this.state;
    return (
      <div className="parent">
        <h3>我是A组件</h3>
        <h4>我的用户名是:{username}</h4>
        //如果传的只有一个值例如username,应该式value={username},后面就是直接获取了,不需要再属性名取值了
        <Provider value={{ username, age }}>
          <B />
        </Provider>
      </div>
    );
  }
}

class B extends Component {
  render() {
    return (
      <div className="child">
        <h3>我是B组件</h3>
        <C/>
      </div>
    );
  }
}

 class C extends Component {
	//声明接收context
	static contextType = MyContext
	render() {
		const {username,age} = this.context
		return (
			<div className="grand">
				<h3>我是C组件</h3>
				<h4>我从A组件接收到的用户名:{username},年龄是{age}</h4>
			</div>
		)
	}
} 

// function C() {
//   return (
//     <div className="grand">
//       <h3>我是C组件</h3>
//       <h4>
//         我从A组件接收到的用户名:
//         {/* <Consumer>{(value) => `${value.username},年龄是${value.age}`}</Consumer> */}
//       </h4>
//     </div>
//   );
// }

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Qt资源文件.qrc

目录 一 用途 二 使用效果 三 如何添加资源文件 一 用途 有时候我们想添加图片或者动画的话&#xff0c;就可以使用资源文件 二 使用效果 我在标签上添加了一个蝴蝶的图片&#xff0c;最后呈现出来的效果就是这样子的 三 如何添加资源文件 添加资源文件要指定特定的路径&…

iptables语法规则

iptables命令基本语法 iptables [-t table] command [链名] [条件匹配] [-j 目标动作]以下是对iptables命令的拆分讲解&#xff1a; -t table 用来指明使用的表&#xff0c;有三种选项&#xff1a;filter,nat,mangle。若未指定&#xff0c;则默认使用filter表。 command参数 …

【数据库】基础知识,创建一个表

计算机硬件软件硬件&#xff1a;1.输入输出设备 2.控制器 3.运算器 4.存储器&#xff08;内存&#xff09;软件&#xff1a;1.应用软件 2.系统软件&#xff08;操作系统、数据库管理系统、语言处理系统……&#xff09;从开发者角度分软件&#xff1a;B/S浏览器和服务器结构&am…

umi学习(umi4)

umi 官方文档 官方建议使用 pnpm node版本在 14 以上 创建项目&#xff1a; 根据 包管理工具不同 &#xff0c;官方推荐 这里使用 pnpm&#xff1a; 1. pnpm dlx create-umilatest 2. 选择模板 &#xff08;这里使用 Simple App&#xff09; 想对module处理需要使用 Ant Desig…

19 客户端服务订阅机制的核心流程

Nacos客户端服务订阅机制的核心流程 说起Nacos的服务订阅机制&#xff0c;大家会觉得比较难理解&#xff0c;那我们就来详细分析一下&#xff0c;那我们先从Nacos订阅的概述说起 Nacos订阅概述 Nacos的订阅机制&#xff0c;如果用一句话来描述就是&#xff1a;Nacos客户端通…

vue自定义指令以及angular自定义指令(以禁止输入空格为例)

哈喽&#xff0c;小伙伴们&#xff0c;大家好啊&#xff0c;最近要实现一个vue自定义指令&#xff0c;就是让input输入框禁止输入空格建立一个directives的指令文件&#xff0c;里面专门用来建立各个指令的官方文档&#xff1a;自定义指令 | Vue.js (vuejs.org)我们都知道vue中…

小白学Pytorch 系列--Torch API

小白学Pytorch 系列–Torch API Torch version 1.13 Tensors TORCH.IS_TENSOR 如果obj是PyTorch张量&#xff0c;则返回True。 注意&#xff0c;这个函数只是简单地执行isinstance(obj, Tensor)。使用isinstance 更适合用mypy进行类型检查&#xff0c;而且更显式-所以建议使…

开发手册——一、编程规约_5.集合处理

这篇文章主要梳理了在java的实际开发过程中的编程规范问题。本篇文章主要借鉴于《阿里巴巴java开发手册终极版》 下面我们一起来看一下吧。 1. 【强制】关于 hashCode 和 equals 的处理&#xff0c;遵循如下规则&#xff1a; 只要重写 equals&#xff0c;就必须重写 hashCod…

I.MX6ULL_Linux_系统篇(21) kernel启动流程

链接脚本 vmlinux.lds 要分析 Linux 启动流程&#xff0c;同样需要先编译一下 Linux 源码&#xff0c;因为有很多文件是需要编译才会生成的。首先分析 Linux 内核的连接脚本文件 arch/arm/kernel/vmlinux.lds&#xff0c;通过链接脚本可以 找到 Linux 内核的第一行程序是从哪里…

计算机网络安全基础知识3:网站漏洞,安装phpstudy,安装靶场漏洞DVWA,搭建一个网站

计算机网络安全基础知识3&#xff1a;网站漏洞&#xff0c;安装phpstudy&#xff0c;安装靶场漏洞DVWA&#xff0c;搭建一个网站 2022找工作是学历、能力和运气的超强结合体&#xff0c;遇到寒冬&#xff0c;大厂不招人&#xff0c;可能很多算法学生都得去找开发&#xff0c;测…

7.桥接模式

目录 简介 定义 特点 结构 示例 1. 新建 Brand.interface 接口类&#xff0c;定义不同品牌手机共有的基本功能 2. 新建 Xiaomi.class 类&#xff0c;实现 Brand.interface 接口&#xff0c;实现具体功能 3. 新建 Vivo.class 类&#xff0c;实现 Brand.interface 接口&…

Mybatis源码学习笔记(六)之Mybatis中集成日志框架原理解析

1 Mybatis中集成日志框架示例 1.1 Mybatis使用log4j示例&#xff08;推荐方式&#xff09; 第一步&#xff1a;pom.xml引入log4j依赖 <!-- slf4j日志门面 --><dependency><groupId>org.slf4j</groupId><artifactId>slf4j-api</artifactId&…

Thinkphp6使用RabbitMQ消息队列

Thinkphp6连接使用RabbitMQ&#xff08;不止tp6&#xff0c;其他框架对应改下也一样&#xff09;&#xff0c;如何使用Docker部署RabbitMQ&#xff0c;在上一篇已经讲了->传送门<-。 部署环境 开始前先进入RabbitMQ的web管理界面&#xff0c;选择Queues菜单&#xff0c;点…

深度学习实战20(进阶版)-文件智能搜索系统,可以根据文件内容进行关键词搜索,快速找到文件

大家好&#xff0c;我是微学AI&#xff0c;今天给大家带来深度学习实战项目-文件智能搜索系统&#xff0c;文件智能搜索系统是一种能够帮助用户通过文件的内容快速搜索和定位文件的软件系统。 随着互联网和数字化技术的普及&#xff0c;数据和信息呈现爆炸式增长的趋势&#xf…

ubuntu 将jupyter-lab保存为桌面快捷方式和favourites

ubuntu: 将jupyter-lab保存为桌面快捷方式和favourites desktop shortcut 建立一个新的desktop文件 cd ~/Desktop touch Jupyter-lab.desktop将文件修改成如下&#xff1a; [Desktop Entry] Version1.0 NameJupyterlab CommentBack up your data with one click Exec/home/cjb/…

SpringCloud学习笔记(一)

单体应用架构 在诞⽣之初&#xff0c;拉勾的⽤户量、数据量规模都⽐较⼩&#xff0c;项目所有的功能模块都放在一个工程中编码、编译、打包并且部署在一个Tomcat容器中的架构模式就是单体应用架构。 优点&#xff1a; 高效开发&#xff1a;项⽬前期开发节奏快&#xff0c;团…

02-Oracle数据库的启动与关闭

本文章主要讲解Oracle数据库的启动与关闭方法&#xff0c;详细讲解启动Oracle的命令&#xff0c;三种启动数据库的方法及区别&#xff1b;关闭数据库的4种方法及他们的区别。 启动和关闭数据库 •数据库没启动前&#xff0c;只有拥有DBA权限或者以sysoper或sysdba身份才能连接到…

设计跳表(动态设置节点高度)

最近学习redis的zset时候&#xff0c;又看到跳表的思想&#xff0c;突然对跳表的设置有了新的思考 这是19年设计的跳表&#xff0c;在leetcode的执行时间是200ms 现在我对跳表有了新的想法 1、跳表的设计&#xff0c;类似二分查找&#xff0c;但是不是二分查找&#xff0c;比较…

基于Canal的数据同步

基于Canal的数据同步 一、 系统结构 该数据同步系统由Spring Boot和Canal共同组成。 Spring Boot 是一个流行的 Java Web 框架&#xff0c;而 Canal 则是阿里巴巴开源的 MySQL 数据库的数据变更监听框架。结合 Spring Boot 和 Canal&#xff0c;可以实现 MySQL 数据库的实时数…

ASGCN之图卷积网络(GCN)

文章目录前言1. 理论部分1.1 为什么会出现图卷积网络&#xff1f;1.2 图卷积网络的推导过程1.3 图卷积网络的公式2. 代码实现参考资料前言 本文从使用图卷积网络的目的出发&#xff0c;先对图卷积网络的来源与公式做简要介绍&#xff0c;之后通过一个例子来代码实现图卷积网络…