react 组件进阶

news2024/10/6 10:28:19

目标:1.能够使用props接收数据

            2.能够实现父子组建之间的通讯

            3.能够实现兄弟组建之间的通讯

            4.能够给组建添加props校验

            5.能够说出生命周期常用的钩子函数

            6.能够知道高阶组件的作用

一,组件通讯介绍

组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据。在组件化过程中,我们将一个完整的功能拆分成多个组件,以更好的完成整个应用的功能,而在这个过程中,多个组件之间不可避免的要共享某些数据。为了实现这些功能,就需要打破组建的独立封闭性,让其与外界沟通,这个过程就是组件通讯。

 

822dfcc59be642b1a9394152855663d2.png

二,组件的props

组建是封闭的,要接受外部数据应该通过props来实现

props的作用:接收传递给组件的数据

传递数据:给组件标签添加属性

接收数据:函数组件通过参数props接收数据,类组件通过this.props接受数据

 

d4a1d2f110b844fa87ac4d3726afd579.png

组件的特点:

 1.可以给组件传递任意类型的数据

2.props 是只读的对象,只能读取属性的值,无法修改对象

3.注意:使用类组建时,如果写了构造函数,应该将props传递给super(),否在无法在构造函数中获取到props。

3fc4414ee2dd44b98506f1e22103afda.png

三,组建通讯的三种方式

1.父组件 -> 子组件

1.父组件提供眼传递的state数据

2.给子组件标签添加属性,值为state 中的数据

3.子组件中通过props 接收父组建中传递的数据

 

3cab4438ae8447d3b999b13ff8fa885c.png

2.子组件 -> 父组件

思路:利用回调函数,父组件提供回调,子组件调用,将要传递的数据作为回调函数的参数。

1.父组件提供一个回调函数(用于接受数据)

2.将该函数作为属性的值,传递给子组件

e2273f512f20432d92c88a1893abb8e0.pngd872a0738cfe4bad87816da7ce193181.png

3.兄弟组件

将共享状态提升到最近的公共父组件中,由公共父组件管理这个状态

思路:状态提升

公共父组件职责,1,提供共享状态         2,提供操作共享状态的方法

要通讯的子组建只需要通过 props 接收状态或操作状态的方法

四,Context

思考:App组件要传递数据给Child 组件,该如何处理?

更好的姿势:使用 Context

作用:跨组件传递数据(比如:主题,语言等)

使用步骤:

1.调用React.createContext() 创建Provider(提供数据)和 Consumer (消费数据)两个组件

5a760932d62b4515b66b4e43cba4e732.png

2.使用 Provider 组件作为父节点

d5f5b2e64d6c4f828651c76f0c5f430b.png

3.设置value 属性,表示要传递的数据

55a6543f8a3d4b2d8b959af7617084c8.png

4.调用Consumer 组件接收数据。

3235208822ee49d6a0594e46f767f25f.png

总结:

1.如果两个组件是远方亲戚(比如:嵌套多层)可以使用Context实现通讯

2.Context 提供李两个组件:Provider 和 Consumer 

3.Provider 组件:用来提供数据

4.Consumer组建:用来消费数据

a385a21d005e42b28481f7b21d40e48a.png

五,props深入

6df6f66dff3541858dc415eedf0f8747.png

5b952c0e24694897bd093178f392c97a.png 

 

 

 

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

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

相关文章

【pandas】数据清洗的几种方法

引言 在数据处理和分析过程中,数据清洗是至关重要的一步。Pandas是Python中用于数据处理和分析的强大库,提供了多种数据清洗方法。本文将介绍几种常用的数据清洗方法:缺失值处理、重复值处理、异常值处理。 准备 这里准备了一份数据集&…

从0到0.01入门React | 009.精选 React 面试题

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…

网络安全在文档管理中的重要作用

无论它们存放在哪里,确保它们的安全都应该是首要任务。 随着文档管理继续从物理文件柜向数字数据库和云的长期过渡,网络威胁的可能性随着每一步和每次迁移而增加。因此,组织了解并解决文档管理和网络安全之间的联系至关重要。 文档管理的安…

docker搭建etcd集群

最近用到etcd,就打算用docker搭建一套,学习整理了一下。记录在此,抛砖引玉。 文中的配置、代码见于https://gitee.com/bbjg001/darcy_common/tree/master/docker_compose_etcd 搭建一个单节点 docker run -d --name etcdx \-p 2379:2379 \…

初始MySQL(四)(查询加强练习,多表查询(未完))

目录 查询加强 where加强 order by加强 group by 分页查询 总结 多表查询(重点) 笛卡尔集及其过滤 自连接 子查询 #先创建三张表 #第一张表 CREATE TABLE dept(deptno MEDIUMINT NOT NULL DEFAULT 0,dname VARCHAR(20) NOT NULL DEFAULT ,loc VARCHAR(13) NOT NULL D…

【KVM】硬件虚拟化技术(详)

前言 大家好,我是秋意零。 经过前面章节的介绍,已经知道KVM虚拟化必须依赖于硬件辅助的虚拟化技术,本节就来介绍一下硬件虚拟化技术。 👿 简介 🏠 个人主页: 秋意零🔥 账号:全平…

SpringBoot2.X整合集成Dubbo

环境安装 Dubbo使用zookeeper作为注册中心,首先要安装zookeeper。 Windows安装zookeeper如下: https://blog.csdn.net/qq_33316784/article/details/88563482 Linux安装zookeeper如下: https://www.cnblogs.com/expiator/p/9853378.html Sp…

CCF ChinaSoft 2023 论坛巡礼 | CCF-华为胡杨林基金-形式化方法专项(海报)论坛

2023年CCF中国软件大会(CCF ChinaSoft 2023)由CCF主办,CCF系统软件专委会、形式化方法专委会、软件工程专委会以及复旦大学联合承办,将于2023年12月1-3日在上海国际会议中心举行。 本次大会主题是“智能化软件创新推动数字经济与社…

从0到0.01入门React | 008.精选 React 面试题

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…

Android 基本属性绘制文本对象FontMetrics

FontMetrics对象 它以四个基本坐标为基准,分别为: ・FontMetrics.top ・FontMetrics.ascent ・FontMetrics.descent ・FontMetrics.bottom 如图: 要点如下: 1. 基准点是baseline 2. Ascent是baseline之上至字符最高处的距离 3. Descent是ba…

【多线程 - 03、线程的生命周期】

生命周期 当线程被创建并启动以后,它不是一启动就进入执行状态,也不会一直处于执行状态,而是会经历五种状态。 线程状态的五个阶段: 新建状态(New)就绪状态(Runnable)运行状态&…

TensorFlow学习笔记--(3)张量的常用运算函数

损失函数及求偏导 通过 tf.GradientTape 函数来指定损失函数的变量以及表达式 最后通过 gradient(%损失函数%,%偏导对象%) 来获取求偏导的结果 独热编码 给出一组特征值 来对图像进行分类 可以用独热编码 0的概率是第0种 1的概率是第1种 0的概率是第二种 tf.one_hot(%某标签…

【差旅游记】启程-新疆哈密(1)

哈喽,大家好,我是雷工。 最近有个新疆罗布泊的项目要去现场,领导安排我过去,这也算第一次到新疆,记录下去新疆的过程。 01、天有不测风云 本来预定的是11月2号石家庄飞成都,成都转机到哈密,但…

为什么要用“交叉熵”做损失函数

大家好啊,我是董董灿。 今天看一个在深度学习中很枯燥但很重要的概念——交叉熵损失函数。 作为一种损失函数,它的重要作用便是可以将“预测值”和“真实值(标签)”进行对比,从而输出 loss 值,直到 loss 值收敛,可以…

Linux--gcc/g++

一、gcc/g是什么 gcc的全称是GNU Compiler Collection,它是一个能够编译多种语言的编译器。最开始gcc是作为C语言的编译器(GNU C Compiler),现在除了c语言,还支持C、java、Pascal等语言。gcc支持多种硬件平台 二、gc…

【Pytorch和深度学习】栏目导读

一、栏目说明 本栏目《pytorch实践》是为初学者入门深度学习准备的。本文是该栏目的导读部分,因为计划本栏目在明年完成,因此,导读部分,即本文也在持续更新中。 本栏目设计目标是将深度学习全面用pytorch实践一遍,由浅…

2390 高校实验室预约系统JSP【程序源码+文档+调试运行】

摘要 本文介绍了一个高校实验室预约系统的设计和实现。该系统包括管理员、教师和学生三种用户,具有基础数据管理、学生管理、教师管理、系统公告管理、实验室管理、实验室预约管理和系统管理等模块。通过数据库设计和界面设计,实现了用户友好的操作体验…

std::any

一、简介 std::any 可以储存任何可拷贝构造和可销毁的类型的对象。 struct test {test(int a,int b){} };int main(int argc, char *argv[]) {std::any a 1;qDebug() << a.type().name();a 3.14;qDebug() << a.type().name();a true;qDebug() << a.type…

PyCharm 安装库时显示连接超时

在setting->python Interpreter 中用“” 安装库时&#xff0c;出现一个弹窗&#xff0c;提示信息如下&#xff1a; Error updating package list: Connect timed out 通过查阅资料&#xff0c;发现是镜像源的问题&#xff0c;具体的解决方案如下&#xff1a; 1. 更新一下…

阿里云国际站:云备份

文章目录 一、阿里云云备份的概念 二、云备份的优势 三、云备份的功能 四、云备份的应用场景 一、阿里云云备份的概念 云备份作为阿里云统一灾备平台&#xff0c;是一种简单易用、敏捷高效、安全可靠的公共云数据管理服务&#xff0c;可以为阿里云ECS整机、ECS数据库、文件…