【React】初学React

A. react中如何创建元素呢?

说明一点:
属性都改为驼峰形式(无障碍属性aria-*除外),
class改成className

创建元素

B. 变量表达式如何表示呢?大括号{ }包起来

变量值用大括号包裹

C. 元素组件的区别

元素是构成 React 应用最小砖块。元素描述了你在屏幕上想看到的内容。

const element = <h1>Hello, world</h1>;

组件允许你将 UI 拆分为独立可复用的代码片段,并对每个片段进行独立构思。
组件,从概念上类似于 JavaScript 函数。它接受任意的入参(即 props),并返回用于描述页面展示内容的 React 元素

组件


D. React元素浏览器的 DOM 元素的区别

React 元素是不可变对象。一旦被创建,你就无法更改它的子元素或者属性。一个元素就像电影的单帧:它代表了某个特定时刻的 UI。那如何才能刷新页面上的数据呢?看下面计时器的例子:

计时器

但:React 元素是创建开销极小的普通对象React 只更新它需要更新的部分

React DOM 会将元素和它的子元素与它们之前的状态进行比较只会进行必要的更新来使 DOM 达到预期的状态

你可以使用浏览器的检查元素工具查看上一个例子来确认这一点。

DOM inspector showing granular updates

尽管每一秒我们都会新建一个描述整个 UI 树的元素React DOM 只会更新实际改变了的内容


E1. 组件入参props:只读,不可修改

props

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改

  纯函数function sum(a, b) {return a + b;}不纯函数function withdraw(account, amount) {account.total -= amount;}

E2. React中的占位符:类似vue中的slot

占位

E3. 如何像使用vue的$attrs一样使用React的props

react中传递props,如果一层一层传递,只需要使用 <Component {...props}></Component>


F. class 组件中添加 state:请使用setState()修改

class组件

关于state的几点说明:
① 不要直接修改 state,代码this.state.comment = 'Hello'不会重新渲染组件
② 而是应该使用 setState()this.setState({comment: 'Hello'})
③ 构造函数是唯一可以给 this.state 赋值的地方
state 的更新可能是异步的:

state异步更新

setState的更新会被合并

state合并更新

⑥ 组件可以选择把它的 state 作为 props 向下传递到它的子组件中
state值作为props值


G. 事件处理

事件处理

使用 React 时,你一般不需要使用 addEventListener 为已创建的 DOM 元素添加监听器。你只需要在该元素初始渲染的时候添加监听器即可。

当你使用 ES6 class 语法定义一个组件的时候,通常的做法是将事件处理函数声明为 class 中的方法。例如,下面的 Toggle 组件会渲染一个让用户切换开关状态的按钮:

事件处理函数

向事件处理程序传递参数

在循环中,通常我们会为事件处理函数传递额外的参数。例如,若 id 是你要删除那一行的 ID,以下两种方式都可以向事件处理函数传递参数:

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

上述两种方式是等价的,分别通过箭头函数和 Function.prototype.bind 来实现。

在这两种情况下,React 的事件对象 e 会被作为第二个参数传递。如果通过箭头函数的方式,事件对象必须显式的进行传递,而通过 bind 的方式,事件对象以及更多的参数将会被隐式的进行传递。


H. 条件渲染if & 列表 for

条件渲染
列表渲染

JSX 允许在大括号中嵌入任何表达式,所以我们可以内联 map() 返回的结果

function NumberList(props) {const numbers = props.numbers;return (<ul>{numbers.map((number) =><ListItem key={number.toString()} value={number} />)}</ul>);
}

I. 表单Form:受控组件

受控组件
  • 表单元素设置了 value 属性,因此显示的值将始终为 this.state.value,这使得 Reactstate 成为唯一数据源。
  • 由于 handlechange 在每次按键时都会执行并更新state,因此显示的值将随着用户输入而更新。
  • 对于受控组件来说,每个 state 突变都有一个相关的处理函数。这使修改或验证用户输入变得简单。如要求所有输入都大写,可以将 handlechange 改为:
handleChange(event) {this.setState({value: event.target.value.toUpperCase()});
}

处理多个输入:当需要处理多个 input 元素时,我们可以给每个元素添加 name 属性,并让处理函数根据 event.target.name 的值选择要执行的操作。

class Reservation extends React.Component {constructor(props) {super(props);this.state = {isGoing: true,numberOfGuests: 2};this.handleInputChange = this.handleInputChange.bind(this);}handleInputChange(event) {const target = event.target;const value = target.type === 'checkbox' ? target.checked : target.value;const name = target.name;this.setState({[name]: value});}render() {return (<form><label> 参与:<input name="isGoing" type="checkbox"checked={this.state.isGoing}onChange={this.handleInputChange} /></label><br /><label>来宾人数:<input name="numberOfGuests" type="number"value={this.state.numberOfGuests}onChange={this.handleInputChange} /></label></form>);}
}

受控输入空值:在受控组件上指定 value 的 prop 可以防止用户更改输入。如果指定了 value,但输入仍可编辑,则可能是意外地将value 设置为 undefinednull

ReactDOM.render(<input value="hi" />, mountNode);
setTimeout(function() {ReactDOM.render(<input value={null} />, mountNode);
}, 1000);

成熟的解决方案: 如果你想寻找包含验证、追踪访问字段以及处理表单提交的完整解决方案,使用 Formik 是不错的选择。

文件 input 标签<input type="file" />它的 value 只读,所以它是 React 中的一个非受控组件。


J. 非受控组件

  • 在大多数情况下,我们推荐使用 受控组件 来处理表单数据。在一个受控组件中,表单数据是由 React 组件来管理的。
  • 另一种替代方案是使用非受控组件,这时表单数据将交由 DOM 节点来处理。
非受控组件

文件输入:在 React 中,<input type="file" /> 始终是一个非受控组件,因为它的值只能由用户设置,而不能通过代码控制

class FileInput extends React.Component {constructor(props) {super(props);this.handleSubmit = this.handleSubmit.bind(this);this.fileInput = React.createRef();}handleSubmit(event) {event.preventDefault();alert(`Selected file - ${this.fileInput.current.files[0].name}`);}render() {return (<form onSubmit={this.handleSubmit}><label>Upload file:<input type="file" ref={this.fileInput} /></label><br /><button type="submit">Submit</button></form>);}
}ReactDOM.render(<FileInput />,document.getElementById('root')
);

K. 状态提升【官网案例就不重复了】

  • 状态提升是什么意思? 一个最简单的例子:
  • 两个子组件需要利用对方的状态,这时我们就需要用到状态提升
  • 具体做法:把两个子组件的状态写到它们的父组件中,然后父组件把状态传递到子组件的props中去,这样子组件也相当于有状态
  • 父组件相当于是数据源,这样的话,子组件是没有控制权的
  • 那么之前子组件的state怎么办呢?像:
    <input value = {this.state.value} onChange = {this.handleChange}/>
  • 那就在父组件中写出对应的处理函数,并在函数中更改state

最后编辑于:2024-10-27 15:39:33


喜欢的朋友记得点赞、收藏、关注哦!!!

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

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

相关文章

Memento 备忘录模式

备忘录模式 意图结构适用性实例Java Web开发中的简单示例Originator 类Memento 类Caretaker 类 文本编辑器示例1. Originator (发起人) - TextEditor2. Memento (备忘录) - TextMemento3. Caretaker (负责人) - History4. 使用示例输出 备忘录模式&#xff08;Memento Pattern&…

导入项目时微信开发者工具如何自动识别项目APPID

一、需求 当我们在公司拉取小程序项目的时候&#xff0c;经常会在微信开发者工具中导入项目&#xff0c;需要我们手动输入自己的appid非常麻烦&#xff0c;我们可以用在导入项目的时候自动识别公司的appid 二、步骤 2.1 使用Hbuilder工具编译项目 编译成功后会有一个unpacka…

小语言模型介绍与LLM的比较

小模型介绍 小语言模型&#xff08;SLM&#xff09;与大语言模型&#xff08;LLM&#xff09;相比&#xff0c;具有不同的特点和应用场景。大语言模型通常拥有大量的参数&#xff08;如 GPT-3 拥有 1750 亿个参数&#xff09;&#xff0c;能够处理复杂的自然语言任务&#xff…

17.快递物流仓库管理系统(基于springboot和vue)

目录 1.系统的受众说明 2.系统详细设计 2.1 需求分析 2.2 系统功能设计 2.3 开发环境分析 ​​​​​​​2.4 E-R图设计 2.5 数据库设计 3. 系统实现 3.1 环境搭建 ​​​​​​​3.2 员工信息管理模块 3.3 销售订单信息管理模块 ​​​​​​​3.4 图表分析模块…

Shortcut Learning in In-Context Learning: A Survey

为我们的综述打一打广告&#xff0c;目前是初级版本&#xff0c;欢迎各位批评指正&#xff01;后续的论文列表、测评基准会在Github更新[/(ㄒoㄒ)/~~最近比较忙容许我拖一拖] 这里是arxiv链接&#xff1a;Linking!!! Abstract&#xff1a;捷径学习是指模型在实际任务中使用简单…

第三十四章 Vue路由进阶之声明式导航(导航高亮)

目录 一、导航高亮 1.1. 基于语法 1.2. 主要代码 二、声明式导航的两个类名 2.1. 声明式导航类名匹配方式 2.2. 声明式导航类名样式自定义 ​2.3. 核心代码 一、导航高亮 1.1. 基于语法 在Vue中通过VueRouter插件&#xff0c;我们可以非常简单的实现实现导航高亮效果…

第七部分:1. STM32之ADC实验--单通道实验

主要利用一个模拟量的电位器来实时改变电压值&#xff0c;通过STM32自带的ADC通道来采集这个数据&#xff0c;并打印出来&#xff01; 一句话&#xff0c;学完STM32&#xff0c;我就往南走&#xff0c;我的工资只有5000.~~~~Whappy

Ubuntu20.04两种安装及配置中文界面、输入法、换源、共享文件夹实现,及注意事项

虚拟机安装法 1、新建虚拟机&#xff0c;自定义下一步 任意指定路径 提高处理器数量能加快系统响应 完成以后不要运行&#xff0c;添加镜像文件 导入镜像文件&#xff0c;点击浏览 选择后打开->确认->运行虚拟机 出现这种情况就需要检查虚拟机的配置&#xff0c;操作系统…

记录解决vscode 登录leetcode中遇到的问题

1. 安装完 leetcode 点击sign in to leetcode 点击打开网站登录leetcode&#xff0c;发现网页无法打开。 解决办法&#xff1a;将leetcode.cn.js文件中的leetcode-cn.com路径都改成leetcode.cn 2. 继续点击 sign in to leetcode &#xff0c;选择使用账号登录&#xff0c;始…

docker镜像仓库实战

docker镜像仓库实战 搭建一个nginx服务基础知识(Web服务器)查找nginx镜像拉取镜像启动nginx镜像 搭建一个nginx服务 基础知识(Web服务器) Web 服务器&#xff0c;一般是指“网站服务器”&#xff0c;是指驻留于互联网上某种类型计算机的程序。Web 服务器可以向 Web 浏览器等客…

zabbix安装配置与使用

zabbix Zabbix的工作原理如下: 监控部分: Zabbix Agent安装在各个需要监控的主机上,它以主配置的时间间隔(默认60s)收集主机各项指标数据,如CPU占用率、内存使用情况等。 通讯部分: Agent会把收集的数据通过安全通道(默认10051端口)发送到Zabbix Server。Server会存储这些数…

CSS的三个重点

目录 1.盒模型 (Box Model)2.位置 (position)3.布局 (Layout)4.低代码中的这些概念 在学习CSS时&#xff0c;有三个概念需要重点理解&#xff0c;分别是盒模型、定位、布局 1.盒模型 (Box Model) 定义&#xff1a; CSS 盒模型是指每个 HTML 元素在页面上被视为一个矩形盒子。…

关于LLC知识23(频率越大变压器体积越小?)

为什么频率越高&#xff0c;同样的磁芯就可以用的更小&#xff1f; 变压器他负责的功能是 1、隔离 2、能量传递 这里主要是与能量传递有关 我们首先要知道&#xff0c;次级的输出功率一定的情况下&#xff0c;那么在一定的时段内消耗的能量就是一定的&#xff0c;比如1000W…

UE5.4 PCG Layered Biomes插件

B站学习链接 官方文档 一、PCGSpawn Preset&#xff1a;负责管理PCG要用到的植被资产有哪些 二、BiomesSettings&#xff1a;设置要使用的植被资产Layer、Spawn参数 1.高度Layer参数&#xff1a; 2.地形Layer&#xff1a;我这里用地形样条线绘制了一块地形Layer 绘制点和…

数字后端零基础入门系列 | Innovus零基础LAB学习Day8

###LAB15 Detail Routing for Signal Integrity, Timing, Power and Design for Yield 这个章节虽然标题有点长&#xff0c;但不要被它吓到&#xff0c;其实这个章节就是Innovus工具的绕线Routing。只不过这个阶段做Route不是仅仅是把所有的逻辑连接&#xff0c;用实际的金属层…

量化交易 股市技术指标

股市数据分类 股票数据根据信息来源和分析方法的不同&#xff0c;可以分为技术面数据和基本面数据。 技术面数据和基本面数据都是股票分析中重要的工具&#xff0c;它们提供了不同的视角和方法来评估股票的投资价值。投资者可以综合运用这两类数据&#xff0c;从技术面和基本…

【从零开始的LeetCode-算法】3222. 求出硬币游戏的赢家

给你两个 正 整数 x 和 y &#xff0c;分别表示价值为 75 和 10 的硬币的数目。 Alice 和 Bob 正在玩一个游戏。每一轮中&#xff0c;Alice 先进行操作&#xff0c;Bob 后操作。每次操作中&#xff0c;玩家需要拿出价值 总和 为 115 的硬币。如果一名玩家无法执行此操作&#…

MR30分布式IO模块与高效PLC协同

在现代工业自动化领域中&#xff0c;数据采集与控制系统扮演着至关重要的角色。其中&#xff0c;可编程逻辑控制器&#xff08;PLC&#xff09;和分布式IO模块&#xff08;Distributed I/O Modules&#xff09;是这一领域的两大核心组件。本文将详细介绍MR30分布式IO模块与PLC如…

贝尔不等式的验证

在量子计算机上运行一个实验&#xff0c;以演示使用Estimator原型违反CHSH不等式。 import numpy as npfrom qiskit import QuantumCircuit from qiskit.circuit import Parameter from qiskit.quantum_info import SparsePauliOpfrom qiskit_ibm_runtime import QiskitRuntim…

CSRF与SSRF

csrf(跨站请求伪造)的原理: csrf全称是跨站请求伪造(cross-site request forgery)&#xff0c;也被称为one-click attack 或者 session riding scrf攻击利用网站对于用户网页浏览器的信任&#xff0c;劫持用户当前已登录的web应用程序&#xff0c;去执行分用户本意的操作。 利…