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 

 

 

 

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

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

相关文章

【PyQt】(自制类)处理鼠标点击逻辑

写了个自认为还算不错的类,用于简化mousePressEvent、mouseMoveEvent和mouseReleaseEvent中的鼠标信息。 功能有以下几点: 鼠标当前状态,包括鼠标左/中/右键和单击/双击/抬起鼠标防抖(仅超出一定程度时才判断鼠标发生了移动),灵…

mysql主从复制-使用心得

文章目录 前言环境配置主库从库 STATEMENTbinloggtidlog-errorDistSQL总结 前言 mysql 主从复制使用感受,遇到一些问题的整理,也总结了一些排查问题技巧。 环境 mysql5.7 配置 附:千万级数据快速插入配置可以参考:mysql千万数…

112. 路径总和

描述 : 给你二叉树的根节点 root 和一个表示目标和的整数 targetSum 。判断该树中是否存在 根节点到叶子节点 的路径,这条路径上所有节点值相加等于目标和 targetSum 。如果存在,返回 true ;否则,返回 false 。 叶子节点 是指没…

Ubuntu 创建并发布 Django 项目

Ubuntu 创建并发布 Django 项目 升级操作系统和软件 sudo apt updatesudo apt -y dist-upgrade 安装 python3-pip sudo apt -y install python3-pip安装 django pip install -i https://pypi.tuna.tsinghua.edu.cn/simple djangosudo apt -y install python3-django创建 dj…

RT-Thread:嵌入式实时操作系统的设计与应用

RT-Thread(Real-Time Thread)是一个开源的嵌入式实时操作系统,其设计和应用在嵌入式领域具有重要意义。本文将从RT-Thread的设计理念、核心特性,以及在嵌入式系统中的应用等方面进行探讨,对其进行全面的介绍。 首先&a…

2023/11/12总结

踩坑记录: org.springframework.jdbc.BadSqlGrammarException: ### Error querying database. Cause: java.sql.SQLSyntaxErrorException: Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column elm.flavors.id which is …

【FAQ】Gradle开发问题汇总

1. buildSrc依赖Spring Denpendency时报错 来自预编译脚本的插件请求不能包含版本号。请从有问题的请求中删除该版本,并确保包含所请求插件io.spring.dependency-management的模块是一个实现依赖项 解决方案 https://www.5axxw.com/questions/content/uqw0grhttps:/…

生成式AI - Knowledge Graph Prompting:一种基于大模型的多文档问答方法

大型语言模型(LLM)已经彻底改变了自然语言处理(NLP)任务。它们改变了我们与文本数据交互和处理的方式。这些强大的AI模型,如OpenAI的GPT-4,改变了理解、生成人类类似文本的方式,导致各种行业出现…

Spring基础——初探

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

SpringBootWeb案例——Tlias智能学习辅助系统(3)——登录校验

前一节已经实现了部门管理、员工管理的基本功能。但并没有登录,就直接访问到了Tlias智能学习辅助系统的后台,这节来实现登录认证。 目录 登录功能登录校验(重点)会话技术会话跟踪方案一 Cookie(客户端会话跟踪技术)会话跟踪方案二…

ROS基础知识复习

【置顶】感谢参考:https://zhuanlan.zhihu.com/p/662074088 0.背景 工作一年多没有做 ROS 相关的开发了,最近找工作想做回这一块来,根据参考内容,抽时间给这边的基础知识敲一遍复习一下 1.环境检查 打开了之前的笔记本&#x…

初始MySQL(三)(合计函数,分组函数,字符串相关函数,数字相关函数,时间日期函数,加密函数,流程控制函数)

目录 合计/统计函数 count 返回行的总数 sum 合计函数 - avg group by 字符串相关函数 数学相关函数 时间日期相关函数 加密函数 流程控制函数 合计/统计函数 count 返回行的总数 Select count(*) | count (列名) from tablename [WHERE where_definition] #演…

xml schema中的sequence的含义

https://www.w3.org/TR/xmlschema-1/#element-sequence xml schema中的sequence的含义:包含的元素必须按规定的顺序出现。通过属性maxOccurs和minOccurs可以定义最多、最少出现的次数。最多可以定义不限制次数,最少可以定义0次。默认是最少出现1次&…

nodejs+vue+python+PHP+微信小程序-安卓- 基于小程序的高校后勤管理系统-计算机毕业设计

考虑到实际生活中在高校后勤管理小程序管理方面的需要以及对该系统认真的分析,将系统权限按管理员和用户这两类涉及用户划分。任何系统都要遵循系统设计的基本流程,本系统也不例外,同样需要经过市场调研,需求分析,概要设计&#x…

阿里云国际站:云备份

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

git分支与tag标签的介绍与使用)

git分支与tag标签的介绍与使用 一.什么是分支与标签1.2.开发环境分层 二git分支介绍2.1分支操作2.2.IDEA中操作分支 三、Git标签的讲解3.1.GitBashHere操作标签3.2. IDEA中操作标签 一.什么是分支与标签 分支(Branches): 功能开发&#xff…

未来的拥塞控制与 Linux EEVDF 调度器

有破要有立。 前面提到 经典端到端拥塞控制将越来越失效,未来该如何,谈谈我的看法。 端到端拥塞控制的难点根本上是要解决公平性问题,顺带着提高资源利用率。我们很容易理解,在共享资源场景下,不公平一定是低效的&am…

[云原生案例2.4 ] Kubernetes的部署安装 【通过Kubeadm部署Kubernetes高可用集群】

文章目录 1. 基本架构及前置准备1.1 基本架构1.2 前置准备 2. 系统初始化操作 ---- 所有节点2.1 关闭防火墙、selinux和swap分区2.1.1 关闭防火墙和selinux2.1.2 关闭交换分区 2.2 修改主机名,添加域名映射2.2.1 修改主机名2.2.2 修改本地hosts文件 2.3 内核升级2.4…

html菜单的基本制作

前面写过一点网页菜单的博文&#xff1b;下面再复习一些技术要点&#xff1b; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"http://www.w3.…

RLHF讲解

RLHF包含了两个至关重要的步骤&#xff1a; 训练Reward Model用Reward Model和SFT Model构造Reward Function&#xff0c;基于PPO算法来训练LLM frozen RMfrozen SFT ModelActor π Φ R L \pi_{\Phi}^{R L} πΦRL​ initialized from SFT ModelCritic V η V_\eta Vη​ i…