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. 箭头函数
示例:
在这里插入图片描述

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

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

相关文章

ARM 点灯

.text .global _start _start: led1设置GPIOE时钟使能 RCC_MP_AHB4ENSETR[4]->1 0X50000A28LDR R0,0X50000A28 指定寄存器地址LDR R1,[R0] 将寄存器数值取出来放在R1中ORR R1,R1,#(0x1<<4) 将第4位设置为1STR R1,[R0] 将修改后的值写回去设置PE10为输出 GPIOE…

Python 爬虫之下载视频(三)

批量下载某B主视频 文章目录 批量下载某B主视频前言一、基本思路二、确定遍历循环结构三、基本思路中第12步三、基本思路中第345步总结 前言 上一篇讲了如何去获取标题和视频链接。这篇就跟大家讲一下如何去下载这些视频。本篇会以标题和 视频链接 为突破口&#xff0c;来寻找…

GrayLog日志平台的基本使用-docker容器日志接入

1、/etc/docker/daemon.json中加入如下配置并重启服务 [rootlocalhost src]# cat /etc/docker/daemon.json { "registry-mirrors": ["https://dhq9bx4f.mirror.aliyuncs.com"], "log-driver": "gelf", "log-opts":…

在Jetpack Compose中使用ExoPlayer实现直播流和音频均衡器

在Jetpack Compose中使用ExoPlayer实现直播流和音频均衡器 背景 ExoPlayer与Media3的能力结合&#xff0c;为Android应用程序播放多媒体内容提供了强大的解决方案。在本教程中&#xff0c;我们将介绍如何设置带有Media3的ExoPlayer来支持使用M3U8 URL进行直播流。此外&#x…

PortSwigger Business Logic Vulnerabilities

lab1: Excessive trust in client-side controls 给了100块 买价值1337的货 在历史包里发现 尝试直接修改价格 lab2: High-level logic vulnerability 这里把加入购物车时价格可控的点修复了 但是数量可控 我们可以买负数的东西来加钱 但是返回Cart total price cannot be …

【数据结构】四、串

目录 一、定义 二、表示与实现 定长顺序存储 堆分配存储 链式存储 三、BF算法 四、KMP算法 1.求next数组 方法一 方法二&#xff08;考试方法&#xff09; 2.KMP算法实现 方法一 方法二 3.nextval 4.时间复杂度 本节最重要的就是KMP算法&#xff0c;其他要求不高…

汽车级EEPROM 存储器 M24C64-DRMN3TP/K是电可擦除可编程只读存储器?它的功能特性有哪些?

M24C64-DRMN3TP/K是一款64 Kbit串行EEPROM汽车级设备&#xff0c;工作温度高达125C。符合汽车标准AEC-Q100 1级规定的极高可靠性。 该设备可通过一个高达1MHz的简单串行I2C兼容接口访问。 存储器阵列基于先进的真EEPROM技术&#xff08;电可擦除可编程存储器&#xff09;。M2…

【力扣】543. 二叉树的直径

543. 二叉树的直径 突然间发现现在刷的题好多都和大一时学的数据结构密切相关&#xff0c;比如说这道题就用到的深度优先搜索算法。 题解&#xff1a; 以根节点为例&#xff0c;我们通过遍历左边的深度就可以得到当前左子树的长度&#xff0c;然后再遍历其右边&#xff0c;就…

吴恩达RLHF课程笔记

1.创建偏好数据集 一个prompt输入到LLM后可以有多个回答&#xff0c;对每个回答选择偏好 比如{prompt,answer1,answer2,prefer1} 2.根据这个数据集&#xff08;偏好数据集&#xff09;&#xff0c;创建reward model&#xff0c;这个model也是一个LLM,并且它是回归模型&#…

momentum2靶机

文章妙语 遇事不决&#xff0c;可问春风&#xff1b; 春风不语&#xff0c;遵循己心。 文章目录 文章妙语前言一、信息收集1.IP地址扫描2.端口扫描3.目录扫描 二&#xff0c;漏洞发现分析代码bp爆破1.生成字典2.生成恶意shell.php2.抓包 三&#xff0c;漏洞利用1.反弹shell 四…

Diffusion扩散模型学习:图片高斯加噪

高斯分布即正态分布&#xff1b;图片高斯加噪即把图片矩阵每个值和一个高斯分布的矩阵上的对应值相加 1、高斯分布 np.random.normal 一维&#xff1a; import numpy as np import matplotlib.pyplot as pltdef generate_gaussian_noise(mean, std_dev, size):noise np.ran…

低代码如何助力企业数字化转型?

目录 一、低代码开发是什么&#xff1f; 二、低代码与企业数字化转型 1&#xff09;集成化 2&#xff09;智能化 3&#xff09;定制化 三、低代码开发平台对于企业数字化转型的优势 01、提供源码 02、私有化部署 03、敏捷开发 04、拓展能力 四、低代码带来的效益 以…

量化服务器 - 后台挂载运行

服务器 - 后台运行 pip3命令被kill 在正常的pip命令后面加上 -no-cache-dir tmux 使用教程 https://codeleading.com/article/40954761108/ 如果你希望在 tmux 中后台执行一个 Python 脚本&#xff0c;你可以按照以下步骤操作&#xff1a; 启动 tmux: tmux这将会创建一个新…

绝对干货-讲讲设计模式之结构型设计模式

经典的23种设计模式种属于结构型设计模式的是装饰模式&#xff0c;适配器模式&#xff0c;代理模式&#xff0c;组合模式&#xff0c;桥接模式&#xff0c;外观模式&#xff0c;享元模式。 如果说创建型设计模式解决的是创建对象的问题&#xff0c;那么结构型模式就是通过类和…

JS逆向基础

JS逆向基础 一、什么是JS逆向&#xff1f;二、接口抓包三、逆向分析 一、什么是JS逆向&#xff1f; 我们在网站进行账号登录的时候对网页源进行抓包就会发现我们输入的密码在后台会显示为一串由字母或数字等符号&#xff0c;这就是经过加密呈现的一段加密文字&#xff0c;而分…

python脚本 链接到ssh服务器 快速登录ssh服务器 ssh登录

此文分享一个python脚本,用于管理和快速链接到ssh服务器。 效果演示 🔥完整演示效果 👇第一步,显然,我们需要选择功能 👇第二步,确认 or 选择ssh服务器,根据配置文件中提供的ssh信息,有以下情况 👇场景一,只有一个候选ssh服务器,则脚本会提示用户是否确认链…

blender径向渐变材质-着色编辑器

要点&#xff1a; 1、用纹理坐标中的物体输出连接映射中的矢量输入 2、物体选择一个空坐标&#xff0c;将空坐标延z轴上移一段距离 3、空坐标的大小要缩放到和要添加材质的物体大小保持一致

存 储 管 理

(1) 存储管理的任务和功能是什么&#xff1f; 解&#xff1a; 存储管理的主要任务是&#xff1a; 支持多道程序的并发执行&#xff0c;使多道程序能共享存储资源&#xff0c;在互不干扰的环境中并发执行。方便用户&#xff0c;使用户减少甚至摆脱对存储器的管理&#xff0c;使…

【前端】前后端通信方法与差异(未完待续)

系列文章 【Vue】vue增加导航标签 本文链接&#xff1a;https://blog.csdn.net/youcheng_ge/article/details/134965353 【Vue】Element开发笔记 本文链接&#xff1a;https://blog.csdn.net/youcheng_ge/article/details/133947977 【Vue】vue&#xff0c;在Windows IIS平台…

WPF中使用DataGrid封装组合控件TreeView+DataGrid

&#xff08;关注博主后&#xff0c;在“粉丝专栏”&#xff0c;可免费阅读此文&#xff09; wpf的功能非常强大&#xff0c;很多控件都是原生的&#xff0c;但是要使用TreeViewDataGrid的组合&#xff0c;就需要我们自己去封装实现。 我们需要的效果如图所示&#x…