react 组件进阶

目标: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 

 

 

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

U-Mail邮件中继,让海外邮件沟通更顺畅

在海外,电子邮件是人们主要的通信工具,尤其是商务往来沟通,企业邮箱是标配。这主要是因为西方国家互联网发展较早,在互联网早期,电子邮件技术较为成熟,大家都用电子邮件交流,于是这成了一种潮流…

2022年03月 Python(五级)真题解析#中国电子学会#全国青少年软件编程等级考试

Python等级考试(1~6级)全部真题・点这里 一、单选题(共25题,每题2分,共50分) 第1题 下面有关random的常用方法,描述错误的是? A: random.random()生成一个[0.0,1.0)之间的随机小数 B: random.randint(a,b)生成一个[a,b]之间的随机整数 C: random.choice(seq)从序列中…

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…

高防CDN:护航网络安全的卓越之选

在当今数字化时代,网络攻击与日俱增,为了确保网站和应用程序的稳定运行,高防CDN(高防御内容分发网络)应运而生。选择高防CDN的理由不仅源于其强大的防护性能,还体现了其与硬件防火墙异曲同工的奥妙。 选择高…

wordpress是什么?快速搭网站经验分享

​作者主页 📚lovewold少个r博客主页 ⚠️本文重点:c入门第一个程序和基本知识讲解 👉【C-C入门系列专栏】:博客文章专栏传送门 😄每日一言:宁静是一片强大而治愈的神奇海洋! 目录 前言 wordp…

[ASP]数据库编辑与管理V1.0

本地测试:需要运行 ASP专业调试工具(自己搜索下载) 默认登陆口令:admin 修改口令:打开index.asp找到第3行把admin"admin"改成其他,如admin"abc123" 程序功能齐全,代码精简…

[.NET]启明星电子文档管理系统edoc v33.0

启明星电子文档库是一个简单、实用的企业文档在线存储工具。系统采用ASP.NETMSSQL2008 Express开发,所有文档数据都以二进制方式存储在数据库里方便备份。 系统的特点包括: (1)支持文档在线预览,可以在线预览word&…

SolidWorks绘制花瓶教程

这个花瓶是我学习solidworks画图以来用时最长的一个图形了,特此记录一下,用了我足足两个早晨才把他给画出来,我这是跟着哔站里的隔壁老王学习的,下面是视频地址:点击我一下看视频教程 下面是我的绘图过程,…

Spring源码系列-Spring AOP

AOP 要实现的是在我们原来写的代码的基础上,进行一定的包装,如在方法执行前、方法返回后、方法抛出异常后等地方进行一定的拦截处理或者叫增强处理。 AOP 的实现并不是因为 Java 提供了什么神奇的钩子,可以把方法的几个生命周期告诉我们&…

Leetcode刷题详解—— 有效的数独

1. 题目链接:36. 有效的数独 2. 题目描述: 请你判断一个 9 x 9 的数独是否有效。只需要 根据以下规则 ,验证已经填入的数字是否有效即可。 数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每一个以粗实线分隔的…

11/12总结

项目进度: 界面画了搜索机票,预定机票,搜索酒店,预定酒店, 然后是开始写这些功能的后端逻辑

RT-DTER 引入用于低分辨率图像和小物体的新 CNN 模块 SPD-Conv

论文地址:https://arxiv.org/pdf/2208.03641v1.pdf 代码地址:https://github.com/labsaint/spd-conv 卷积神经网络(CNN)在图像分类、目标检测等计算机视觉任务中取得了巨大的成功。然而,在图像分辨率较低或对象较小的更困难的任务中,它们的性能会迅速下降。 这源于现有CNN…

终端安全/SOC安全/汽车信息安全大课来袭-共计204节课

在近两年的时间里,我投入了大量的心血和精力,不仅创作了数千篇精美的图片,还编写了超过1000篇文章,以及数百篇内容丰富的PPT。经过这番努力我终于成功地构建出两套系统化的学习课程,它们分别是“Trustzone/TEE/安全从入…

Spring基础——初探

Spring是一个开源的Java应用程序开发框架,它提供了一个综合的编程和配置模型,用于构建现代化的企业级应用程序。Spring的目标是简化Java开发,并提供了许多功能和特性,以提供开发效率、降低开发复杂性。 特别 主要功能 IoC容器 …

IP多播需要使用两种协议(IGMP和多播路由选择协议)

目录 IGMP 多播路由选择协议 组播协议包括组成员管理协议和组播路由协议: 组成员管理协议用于管理组播组成员的加入和离开(IGMP) 组播路由协议负责在路由器之间交互信息来建立组播树(多播路由选择协议) IGMP 图中标有 IP 地址的四台主机都参加了一个多播组,其…

HCIP-双点双向重发布

实验拓扑 要求:全网没有次优路径、且尽量负载均衡。 设备配置 R1 [V200R003C00] #sysname R1 #snmp-agent local-engineid 800007DB03000000000000snmp-agent #clock timezone China-Standard-Time minus 08:00:00 # portal local-server load flash:/portalpage.…

Springboot快速入门

目录 一、概述 SpringBoot的特性 1、起步依赖 2、自动配置 3、其他特性 二、入门程序 步骤 1、创建Maven工程 2、配置spirng-boot-stater-web起步依赖 3、编写Controller 4、提供启动类 启动 测试 三、信息配置 四、整合mybatis 1、引入依赖 2、配置信息 3、…

php的api接口token简单实现

<?php // 生成 Token function generateToken() {$token bin2hex(random_bytes(16)); // 使用随机字节生成 tokenreturn $token; } // 存储 Token&#xff08;这里使用一个全局变量来模拟存储&#xff09; $tokens []; // 验证 Token function validateToken($token) {gl…

【数据结构】树与二叉树(十三):递归复制二叉树(算法CopyTree)

文章目录 5.2.1 二叉树二叉树性质引理5.1&#xff1a;二叉树中层数为i的结点至多有 2 i 2^i 2i个&#xff0c;其中 i ≥ 0 i \geq 0 i≥0。引理5.2&#xff1a;高度为k的二叉树中至多有 2 k 1 − 1 2^{k1}-1 2k1−1个结点&#xff0c;其中 k ≥ 0 k \geq 0 k≥0。引理5.3&…

pta 高空坠球 Python3

皮球从某给定高度自由落下&#xff0c;触地后反弹到原高度的一半&#xff0c;再落下&#xff0c;再反弹&#xff0c;……&#xff0c;如此反复。问皮球在第n次落地时&#xff0c;在空中一共经过多少距离&#xff1f;第n次反弹的高度是多少&#xff1f; 输入格式: 输入在一行中…