当前位置: 首页 > news >正文

React学习计划-React16--React基础(二)组件与组件的3大核心属性state、props、ref和事件处理

1. 组件

  1. 函数式组件(适用于【简单组件】的定义)
    示例:
    在这里插入图片描述

执行了ReactDOM.render(<MyComponent/>, ...)之后执行了什么?

  1. React解析组件标签,找到了MyComponent组件
  2. 发现组件是使用函数定义的,随后调用该函数,将返回的虚拟DOM转为真实DOM,随后呈现在页面中
  1. 类组件(适用于【复杂组件】的定义)
    示例:
    在这里插入图片描述

执行了ReactDOM.render(, …)之后执行了什么?

  1. React解析组件标签,找到了MyComponent组件
  2. 发现组件是使用类定义的,随后new出来该类的实例,并通过该实例调用到原型上的render方法。
  3. 将render返回的虚拟DOM转为真实DOM,随后呈现在页面中

2. 组件三大核心属性1:state(类组件)

1. 理解
  1. state是组件对象最重要的属性,值是对象(可以包含多个key:value组合)
  2. 组件被称为’状态机’,通过更新组件的state来更新对应的页面显示(重新渲染组件)
2. 强烈注意
  1. 组件中render方法中的this为组件实例对象
  2. 组件自定义的方法中thisundefined,如何解决?
    1. 强制绑定this:通过函数对象的bind(),如下示例
    2. 箭头函数:见下方事件示例
  3. 状态数据,不能直接修改或更新,必须用setState,且更新是一种合并,不是替换

我们还要多考虑一个问题:组件内渲染的次数

  1. constructor: 构造器调用几次? —— 1次
  2. render: 调用几次? —— 1+n 次 1是初始化的那次,n是状态更新的次数
  3. changeWeather事件:调用几次?—— 点几次,调用几次

示例:
在这里插入图片描述
当然,我们有简写
在这里插入图片描述

3. 组件三大核心属性2:props

  1. 每个组件对象都会有props(properties的简写)属性
  2. 组件标签的所有属性都保存在props
    如图:
1. 作用
  1. 通过标签属性从组件外向组件内传递变化的数据
  2. 注意:组件内部不要修改props数据
    示例:
    在这里插入图片描述
2. 编码操作
  1. 内部读取某个属性值this.props.name
  2. props中的属性值进行类型限制和必要性限制
<!-- 需要先引入prop-types.js对props传入的值进行限制 -->
<script src="../js/prop-types.js"></script>Person.propTypes = {name: PropTypes.string.isRequiredage: PropTypes.number
}
  1. 扩展属性: 将对象的所以属性通过props传递<MyPerson {...per} />
  2. 默认属性值
Person.defaultProps = {sex: '男',age: 15
}

示例:
在这里插入图片描述

在这里插入图片描述

  1. 组件类的构造函数(其实这函数可写可不写,因为目前来说,没必要)
constructor(props) {super(props)console.log(props) // 打印所有属性
}

看一个实例:
在这里插入图片描述
因为这个属性的限制是加在类身上的嘛,所以给他定义成静态属性,放在类内部,提升便捷性,就不把他放在类外部了,否则,类名一换,欲哭无泪
所以函数组件内部还是只能在外部添加,这么看来,类组件还是很好的。但是后面随着hooks的到来,函数组件成为主流,那么如何对props进行限制就另外探究了:(下图附函数组件限制props
在这里插入图片描述

4. 组件三大核心属性2:ref与事件处理

1. 理解

组件内的标签可以定义ref属性来标识自己

2. 编码
  1. 字符串形式的ref<input ref="input1" />(最简单但不推荐)
    示例
    在这里插入图片描述

  2. 回调形式的ref<input ref={(c) => this.input1 = c} />(也还不错)
    如图:
    在这里插入图片描述

  3. createRef创建ref容器:(推荐)

myRef = React.createRef()
<input ref={this.myRef} />

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

3. 事件处理
  1. 通过onXxx属性指定事件处理函数(注意大小写)
    • React使用的使自定义(合成)事件,而不是使用的原生DOM事件——为了更好的兼容性
    • React中的事件是通过事件委托方式处理的(委托给最外层的元素)——为了高效
  2. 通过event.target得到发生事件的DOM元素对象——不要过度使用ref

针对使用箭头函数说明一下:
组件内的自定义事件放在哪里? —— Demo类的原型对象上,供实例使用
eq1: 由于自定义事件是作为onClick的回调,所以不是通过实例调用的,是直接调用
类的方法默认开启了局部严格模式,所以自定义事件中的thisundefined
可以打印this试一试
那我们如何解决呢:
1. bind强制改变,看上述state的示例
2. 箭头函数
示例:
在这里插入图片描述

相关文章:

React学习计划-React16--React基础(二)组件与组件的3大核心属性state、props、ref和事件处理

1. 组件 函数式组件&#xff08;适用于【简单组件】的定义&#xff09; 示例&#xff1a; 执行了ReactDOM.render(<MyComponent/>, ...)之后执行了什么&#xff1f; React解析组件标签&#xff0c;找到了MyComponent组件发现组件是使用函数定义的&#xff0c;随后调用该…...

flink yarn-session 启动失败retrying connect to server 0.0.0.0/0.0.0.0:8032

原因分析&#xff0c;启动yarn-session.sh&#xff0c;会向resourcemanager的端口8032发起请求&#xff1a; 但是一直无法请求到8032端口&#xff0c;触发重试机制会不断尝试 备注&#xff1a;此问题出现时&#xff0c;我的环境ambari部署的HA 高可用hadoop&#xff0c;三个节点…...

.NET面试题(二)

1.c# 中new关键字的作用 实例化对象和调用构造函数&#xff1a;当使用 new 关键字创建一个类的实例时&#xff0c;它会为对象分配内存&#xff0c;并调用相应的构造函数来初始化该对象。    隐藏基类成员&#xff08;方法、属性、事件等&#xff09;&#xff1a;当在派生类中…...

ffplay工具

在编译ffmpeg时&#xff0c;如果系统中包含了SDL库&#xff0c;则会默认编译生成ffplay工具&#xff0c;否则无法生成ffplay工具。 ffplay即可以作为播放器&#xff0c;也可以作为很多图像化音视频数据的分析工具&#xff0c;通过它可以看到视频图像的运动估计方向、音频数据的…...

第36节: Vue3 事件修饰符

在UniApp中使用Vue3框架时&#xff0c;你可以使用事件修饰符来更方便地处理用户交互事件。以下是一个示例&#xff0c;演示了如何在UniApp中使用Vue3框架使用事件修饰符&#xff1a; <template> <view> <button click.prevent"handleClick">Cli…...

如何在本地安装Flask并将其web界面发布到公网上远程访问协同开发

目录 前言 1. 安装部署Flask 2. 安装Cpolar内网穿透 3. 配置Flask的web界面公网访问地址 4. 公网远程访问Flask的web界面 前言 本篇文章讲解如何在本地安装Flask&#xff0c;以及如何将其web界面发布到公网上并进行远程访问。 Flask是目前十分流行的web框架&#xff0c;…...

八:爬虫-MySQL基础

一&#xff1a;MySQL数据库基础 1.MySQL数据库介绍 MySQL是一个[关系型数据库管理系统]&#xff0c;由瑞典MySQL AB 公司开发&#xff0c;属于 Oracle 旗下产品。MySQL 是最流行的关系型数据库管理系统之一&#xff0c;在 WEB 应用方面&#xff0c;MySQL是最好的 RDBMS (Rela…...

Android定制ROM简介

Android定制ROM简介 这篇文章是为对自定义ROM、AOSP等词汇不太熟悉的技术爱好者和好奇的人写的。我希望通过向您介绍这个世界来开始博客写作。 在我们将注意力转向定制ROM之前&#xff0c;让我们先了解一些基础知识。 什么是操作系统&#xff1f; 维基百科对此的定义简洁而…...

百模大战中的AI行业:新趋势与未来发展

文章目录 每日一句正能量前言技术进步应用拓展行业变革人才竞争后记 每日一句正能量 人生最重要的价值是心灵的幸福&#xff0c;而不是任何身外之物。 前言 随着科技的迅猛发展&#xff0c;人工智能&#xff08;AI&#xff09;已经成为引领技术革命的重要驱动力之一。在当前的…...

VScode安装C/C++编译器步骤

一、安装C/C插件 二、安装 MinGW-w64 工具链 使用国内源 git clone https://gitee.com/cuihongxi/ubuntu2-mac.git 下载后进入到VScode文件夹下&#xff0c;点击msys2-x86_64-20231026.exe进行安装 完成后&#xff0c;确保选中“立即运行 MSYS2”框&#xff0c;然后选择“完…...

【Date对象】js中的日期类型Date对象的使用详情

&#x1f601; 作者简介&#xff1a;一名大四的学生&#xff0c;致力学习前端开发技术 ⭐️个人主页&#xff1a;夜宵饽饽的主页 ❔ 系列专栏&#xff1a;JavaScript小贴士 &#x1f450;学习格言&#xff1a;成功不是终点&#xff0c;失败也并非末日&#xff0c;最重要的是继续…...

【PyTorch】代码学习

文章目录 直接定义nn.Sequential(), 然后append(),最后直接net(),少写很多forward&#xff0c;适合直连式网络 直接定义nn.Sequential(), 然后append(),最后直接net(),少写很多forward&#xff0c;适合直连式网络 代码来源&#xff1a;https://github.com/zshhans/MSD-Mixer/b…...

ElasticSeach--springboot中使用

目录 一.引入依赖 二.配置链接信息 三.索引库测试 1.创建索引库 2.查询索引库 3.删除索引库 四.文档测试 1.添加文档 2.修改文档 3.删除文档 4.查询具体文档 5.批量添加文档 五.查询测试 1.查询所有 2.根据属性term匹配查询 3.分页查询 4.排序 5.过滤属性 6.boo…...

(1)(1.9) MSP (version 4.2)

文章目录 前言 1 协议概述 2 配置 3 参数说明 前言 ArduPilot 支持 MSP 协议&#xff0c;可通过任何串行端口进行遥测、OSD 和传感器。这样&#xff0c;ArduPilot 就能将遥测数据发送到 MSP 兼容设备&#xff08;如大疆护目镜&#xff09;&#xff0c;用于屏幕显示&#x…...

mysql 表锁 行锁

目录 表锁&#xff08;Table Lock&#xff09; 行锁&#xff08;Row Lock&#xff09; 进一步通过举例解释 update操作走的是什么锁 表锁示例&#xff1a; 行锁示例&#xff1a; MySQL 中常见的锁类型包括&#xff1a; 表锁&#xff08;Table Lock&#xff09; 是针对整个…...

Google 提示:切忌滥用 DORA 指标

谷歌的 DevOps 研究与评估团队从事指标交易&#xff0c;即 DevOps 指标。但其最新的相关报告也警告不要过度使用这些指标。 DevOps 研究与评估小组&#xff08;DORA&#xff09;建议 IT 专业人员根据四个关键指标来评估团队绩效&#xff1a;部署频率&#xff0c;变更准备时间&a…...

2023年全球架构师峰会(ArchSummit北京站2023)-核心PPT资料下载

一、峰会简介 ArchSummit聚焦业界强大的技术成果&#xff0c;秉承“实践第一、案例为主”的原则&#xff0c;展示先进技术在行业中的典型实践&#xff0c;以及技术在企业转型、发展中的推动作用。旨在帮助技术管理者、CTO、架构师做好技术选型、技术团队组建与管理&#xff0c…...

安全、高效的MySQL DDL解决方案

MySQL作为目前应用最广泛的开源关系型数据库&#xff0c;是许多网站、应用和商业产品的主要数据存储。在生产环境&#xff0c;线上数据库常常面临着持续的、不断变化的表结构修改&#xff08;DDL&#xff09;&#xff0c;如增加、更改、删除字段和索引等等。其中一些DDL操作在M…...

100GPTS计划-AI学术AcademicRefiner

地址 https://chat.openai.com/g/g-LcMl7q6rk-academic-refiner https://poe.com/AcademicRefiner 测试 减少相似性 增加独特性 修改http://t.csdnimg.cn/jyHwo这篇文章微调 专注于人工智能、科技、金融和医学领域的学术论文改写&#xff0c;秉承严格的专业和学术标准。 …...

k8s 中部署Jenkins

创建namespace apiVersion: v1 kind: Namespace metadata:name: jenkins创建pv以及pvc kind: PersistentVolume apiVersion: v1 metadata:name: jenkins-pv-volumenamespace: jenkinslabels:type: localapp: jenkins spec:#storageClassName: manualcapacity:storage: 5Giacc…...

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)

【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...

Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...

【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...

渗透实战PortSwigger靶场:lab13存储型DOM XSS详解

进来是需要留言的&#xff0c;先用做简单的 html 标签测试 发现面的</h1>不见了 数据包中找到了一个loadCommentsWithVulnerableEscapeHtml.js 他是把用户输入的<>进行 html 编码&#xff0c;输入的<>当成字符串处理回显到页面中&#xff0c;看来只是把用户输…...