【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.rhkb.cn/news/464491.html

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

相关文章

伦敦金价格是交易所公布的吗?

今年以来&#xff0c;伦敦金价格波动可谓是波澜壮阔&#xff0c;盘中屡次刷新历史新高&#xff0c;目前已经冲上了2700的历史大关。面对高歌猛进的伦敦金价格&#xff0c;投资者除了进行交易之外&#xff0c;还有一点相关方面的知识是想了解的。例如&#xff0c;伦敦金价格是交…

程序员也要认识下“信创产业”

兄弟姐妹们&#xff0c;大家初入社会会觉得技术是第一位&#xff0c;我呸&#xff0c;其实你在那个领域敲代码的选择才是最重要的&#xff0c;选对了领域绝对比你背上100个面试题目强&#xff0c;今天带大家了解下信创产业。 信创产业&#xff0c;即信息技术应用创新产业&#…

钉钉向广告低头

商业化重压下&#xff0c;钉钉试水应用内广告。 作者|文昌龙 编辑|杨舟 “钉钉吃相真心难看&#xff01;早晨打卡时间还做开屏广告赚打工人的钱&#xff0c;比如很多踩点上班的&#xff0c;就因为你这5秒时间的开屏广告&#xff0c;没按上打卡按钮就会迟到&#xff0c;知道吗…

IDC报告解读:实用型靶场将成为下一代网络靶场的必然方向

——赛宁网安&#xff1a;回归用户需求&#xff0c;开创实用型靶场新范式 导读 本文基于《IDC TechScape&#xff1a;中国网络安全软件技术发展路线图&#xff0c;2024》中关于网络安全实训演练测试平台&#xff08;靶场&#xff09;的技术路线分析&#xff0c;结合国内外靶场…

RESTful风格

目录 一、什么是RESTful 1.1 RESTFul对WEB服务接口的规定包括&#xff1a; 1.2 REST对请求方式的具体约束如下&#xff1a; 1.3 REST对URL的具体约束如下&#xff1a; 1.4 RESTFul的核心概念&#xff1a; 二、RESTful风格与传统方式对比 三、RESTful风格演示 3.1 查询所…

openapi回调地址请求不通过

目录 1. 验证url接口get请求本地自测报错 2. 测试回调模式成功不返回结果 3. 测试回调模式返回结果带双引号 对接企业微信 产生会话回调事件 接口问题解决 1. 验证url接口get请求本地自测报错 java.lang.IllegalArgumentException: Last encoded character (before the pa…

砥砺十年风雨路,向新而行创新程丨怿星科技十周年庆典回顾

10月24日&#xff0c;是一年中的第256天&#xff0c;也是程序员节&#xff0c;同时也是怿星的生日。2014年到2024年&#xff0c;年华似水匆匆一瞥&#xff0c;多少岁月轻描淡写&#xff0c;怿星人欢聚一堂&#xff0c;共同为怿星科技的十周年庆生&#xff01; 01.回忆往昔&…

C++:AVL树

目录 AVL树概念 AVL树的实现 AVL树的节点 AVL树的插入 AVL树的平衡调整 右单旋 左单旋 左右双旋 右左双旋 完整的插入函数 AVL树的查找 AVL树的验证 验证有序 验证平衡 完整代码 AVL树概念 AVL树是一种具有特殊性质的二叉搜索树&#xff0c;AVL树的左右子树也都…

Nginx线程模型

Nginx的线程模型具有其独特的设计特点&#xff0c;主要基于多进程和异步非阻塞的处理机制。以下是对Nginx线程模型的详细解析&#xff1a; 一、多进程模型 Nginx采用的是多进程模型&#xff0c;而非多线程模型。在这种模型中&#xff0c;Nginx会启动一个master进程和多个work…

【HTML】——VSCode 基本使用入门和常见操作

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯 你们的点赞收藏是我前进最大的动力&#xff01;&#xff01; 希望本文内容能够帮助到你&#xff01;&#xff01; 目录 零&#xff1a;HTML开发工具VSCode的使用 1&#xff1a;创建项目 2&#xff1a;创建格式模板&#x…

【C/C++】【三种方法】模拟实现strlen

学习目标&#xff1a; 使用代码模拟实现strlen。 逻辑&#xff1a; strlen 需要输入一个字符串数组类型的变量&#xff0c;并且返回一个整型类型的数据。strlen 需要计算字符串数组有多少个元素。 代码1&#xff1a;使用计数器 #define _CRT_SECURE_NO_WARNINGS 1 #include&…

【双指针】【数之和】 LeetCode 633.平方数之和

算法思想&#xff1a; 双指针枚举i,j&#xff1b;类似三数之和 class Solution { public:bool judgeSquareSum(int c) {long long sum0;vector<int> dp;dp.push_back(0);long long start1;while(sum < c){sum start *start;if(sum>c) break;else dp.push_back(…

HarmonyOS Next星河版笔记--界面开发(3)

属性 1.1.设计资源-svg图标 需求&#xff1a;界面中展示图标→可以使用的svg图标(任意放大缩小不失真、可以改变颜色) 使用方式&#xff1a; ①设计师提供&#xff1a;基于项目的图标&#xff0c;拷贝到项目目录使用 Image($r(app.media.ic_dianpu)) .width(40) fillColor…

解决方案 | 部署更快,自动化程度高!TOSUN同星线控底盘解决方案

Tosun——线控底盘解决方案 在汽车智能化和电动化进程中&#xff0c;智能线控底盘相关的核心技术和产品成为了新能源汽车及智能驾驶产业的重点发展方向。同星智能作为行业先行者&#xff0c;精研汽车电子行业整体解决方案&#xff0c;提供基于TSMaster的底盘HIL仿真测试解决方…

分布式光伏管理办法

随着分布式光伏项目的不断增加&#xff0c;传统的管理方式已经难以满足高效、精准的管理需求。光伏业务管理系统作为一种集信息化、智能化于一体的管理工具&#xff0c;正在逐步成为分布式光伏项目管理的重要支撑。 光伏业务管理系统通过数字化手段实现对光伏业务全流程的精细化…

细腻的链接:C++ list 之美的解读

细腻的链接&#xff1a;C list 之美的解读 前言&#xff1a; 小编在前几日刚写过关于vector容器的内容&#xff0c;现在小编list容器也学了一大部分了&#xff0c;小编先提前说一下学这部分的感悟&#xff0c;这个部分是我学C以来第一次感到有难度的地方&#xff0c;特别是在…

文件操作案例

文件操作&#xff08;帮助小学生控诉妈妈&#xff09;:###无任何不良指导###

基于 RNN 的语言模型

基于 RNN 的语言模型 循环神经网络&#xff08;Recurrent Neural Network, RNN&#xff09;是一类网络连接中包含环路的 神经网络的总称。 给定一个序列&#xff0c;RNN 的环路用于将历史状态叠加到当前状态上。沿着时间维度&#xff0c;历史状态被循环累积&#xff0c;并作为…

嵌入式硬件工程师的职业发展规划

嵌入式硬件工程师可以按照以下阶段进行职业发展规划&#xff1a; 1. **初级阶段&#xff08;1-3 年&#xff09; ** - **技术学习与积累**&#xff1a; **电路基础强化**&#xff1a; 深入学习模拟电路和数字电路知识&#xff0c;能够熟练分析和设计基本的电路&#xff0c;…

C#:强大而优雅的编程语言

在当今的软件开发领域&#xff0c;C#作为一种广泛应用的编程语言&#xff0c;以其强大的功能、优雅的语法和丰富的生态系统&#xff0c;受到了众多开发者的喜爱。本文将深入探讨 C#的各个方面&#xff0c;展示它的魅力和优势。 一、C#的历史与发展 C#是由微软公司开发的一种面…