React学习笔记02-----React基本使用

一、React简介

想实现页面的局部刷新,而不是整个网页的刷新。AJAX+DOM可以实现局部刷新

1.特点

(1)虚拟DOM

开发者通过React来操作原生DOM,从而构建页面。

React通过虚拟DOM来实现,可以解决DOM的兼容性问题,可以保证对网页最小的修改,避免使用DOM的复杂API

(2)声明式

以结果为导向,根据开发者的需求自动生成相关代码。JSX

(3)基于组件 

将网页中的各个部分拆分出了各个组件,使组件可以复用,降低代码之间的耦合

React本质在开发组件

(4)支持服务器端渲染

二、入门开发

1.引入JS文件

react-dom可以开发网页(操作和DOM相关的时候用);react-native可以开发原生应用。根据需求分别引入,react必须引入。

2.原生DOM和React的写法对比

(1)DOM元素

通过DOM向页面中现有的div中添加一个div

(2)React元素

通过React向页面中现有的div中添加一个div

3.API

(1)createElement()

可以一次性创建React元素名称、属性、内容

创建的React元素不能修改,如何替换?

(2)createRoot()

(3)render()

三、JSX

注意事项

四、渲染列表

1.for循环

通过循环统一给数组中的元素加上<li>

2.map()

通过箭头函数统一给数组中的元素加上<li>

五、虚拟DOM

1.好处

2.刷新的比较顺序

通过diffing算法,依次比较

3.key属性

在显示数组时,需要设置key

可以避免大量的不必要的刷新,key在当前列表中唯一即可,开发中一般采用数据的id作为key,不会使用索引作为key,和没加一样

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

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

相关文章

如何在gitee上创建远程仓库?

登录gitee网站后 填写自己的仓库信息后点击创建 然后来到一个新的界面可以看到自己的仓库地址 这样一个空白的仓库就建立好了 也可以按需选择初始化仓库

Python爬虫入门篇学习记录

免责声明 本文的爬虫知识仅用于合法和合理的数据收集&#xff0c;使用者需遵守相关法律法规及目标网站的爬取规则&#xff0c;尊重数据隐私&#xff0c;合理设置访问频率&#xff0c;不得用于非法目的或侵犯他人权益。因使用网络爬虫产生的任何法律纠纷或损失&#xff0c;由使用…

快手开源LivePortrait,实现表情姿态极速迁移,GitHub 6.5K Star

近日&#xff0c;快手可灵大模型团队开源了名为LivePortrait的可控人像视频生成框架&#xff0c;能够准确、实时地将驱动视频的表情、姿态迁移到静态或动态人像视频上&#xff0c;生成极具表现力的视频结果。如下动图所示&#xff1a; 来自网友测试LivePortrait 来自网友测试Li…

JavaWeb入门程序解析(Spring官方骨架、配置起步依赖、SpringBoot父工程、内嵌Tomcat)

3.3 入门程序解析 关于web开发的基础知识&#xff0c;我们可以告一段落了。下面呢&#xff0c;我们在基于今天的核心技术点SpringBoot快速入门案例进行分析。 3.3.1 Spring官方骨架 之前我们创建的SpringBoot入门案例&#xff0c;是基于Spring官方提供的骨架实现的。 Sprin…

LeetCode-随机链表的复制

. - 力扣&#xff08;LeetCode&#xff09; 本题思路&#xff1a; 首先注意到随机链表含有random的指针&#xff0c;这个random指针指向是随机的&#xff1b;先一个一个节点的拷贝&#xff0c;并且把拷贝的节点放在拷贝对象的后面&#xff0c;再让拷贝节点的next指向原链表拷贝…

Burp安全扫描Web应用

一、浏览器设置代理 如下图所示&#xff0c;点击火狐浏览器的“扩展和主题”&#xff0c;搜索“代理”。 如下图所示&#xff0c;选择搜索到的第一个代理&#xff08;选择任何一个都可以&#xff09;。 如上图所示&#xff0c;第一个点击后&#xff0c;进入如下页面&#xff0…

CT金属伪影去除的去噪扩散概率模型| 文献速递-基于深度学习的多模态数据分析与生存分析

Title 题目 A denoising diffusion probabilistic model for metal artifact reduction in CT CT金属伪影去除的去噪扩散概率模型 01 文献速递介绍 CT图像中的金属伪影是在CT扫描视野内存在金属物体&#xff08;如牙科填充物、骨科假体、支架、手术器械等&#xff09;时出…

爬虫(一)——爬取快手无水印视频

前言 最近对爬虫比较感兴趣&#xff0c;于是浅浅学习了一些关于爬虫的知识。爬虫可以实现很多功能&#xff0c;非常有意思&#xff0c;在这里也分享给大家。由于爬虫能实现的功能太多&#xff0c;而且具体的实现方式也有所不同&#xff0c;所以这里开辟了一个新的系列——爬虫…

破解反爬虫策略 /_guard/auto.js(二)实战

这次我们用上篇文章讲到的方法来真正破解一下反爬虫策略&#xff0c;这两个案例是两个不同的网站&#xff0c;一个用的是 /_guard/auto.js&#xff0c;另一个用的是/_guard/delay_jump.js。经过解析发现这两个网站用的反爬虫策略基本是一模一样&#xff0c;只不过在js混淆和生成…

桥接器设计模式例题

笔有大、中、小三种型号&#xff0c;纸有A4、8K、16K三种型号&#xff0c;颜料有红、蓝、绿三种&#xff0c;请采用桥接器设计模型进行系统设计&#xff0c;能够使用不同型号的笔在不同型号的纸上利用不同颜色的颜料进行绘画。 下面这段代码展示了一个简单的桥接模式(桥接模式)…

Vue--Router(路由)

目录 一 Router(路由) 1.作用 2.实现步骤 3.注意 一 Router(路由) 1.作用 Router又叫做路由&#xff0c;简单来说&#xff0c;就是用来实现vue的页面之间跳转的。 我们都知道&#xff0c;使用vue必然会涉及到很多个组件&#xff0c;也就是页面&#xff0c;而页面之间肯定需…

小程序-模板与配置

一、WXML模板语法 1.数据绑定 2.事件绑定 什么是事件 小程序中常用的事件 事件对象的属性列表 target和currentTarget的区别 bindtap的语法格式 在事件处理函数中为data中的数据赋值 3.事件传参与数据同步 事件传参 &#xff08;以下为错误示例&#xff09; 以上两者的…

【通信协议-RTCM】MSM语句(1) - 多信号GNSS观测数据消息格式

注释&#xff1a; RTCM响应消息1020为GLONASS星历信息&#xff0c;暂不介绍&#xff0c;前公司暂未研发RTCM消息类型版本的DR/RTK模块&#xff0c;DR/RTK模块仅NMEA消息类型使用 注释&#xff1a; 公司使用的多信号语句类型为MSM4&MSM7&#xff0c;也应该是运用最广泛的语句…

算法笔记——LCR

一.LCR 152. 验证二叉搜索树的后序遍历序列 题目描述&#xff1a; 给你一个二叉搜索树的后续遍历序列&#xff0c;让你判断该序列是否合法。 解题思路&#xff1a; 根据二叉搜索树的特性&#xff0c;二叉树搜索的每一个结点&#xff0c;大于左子树&#xff0c;小于右子树。…

数据编织 VS 数据仓库 VS 数据湖

目录 1. 什么是数据编织?2. 数据编织的工作原理3. 代码示例4. 数据编织的优势5. 应用场景6. 数据编织 vs 数据仓库6.1 数据存储方式6.2 数据更新和实时性6.3 灵活性和可扩展性6.4 查询性能6.5 数据治理和一致性6.6 适用场景6.7 代码示例比较 7. 数据编织 vs 数据湖7.1 数据存储…

1.厦门面试

1.Vue的生命周期阶段 vue生命周期分为四个阶段 第一阶段&#xff08;创建阶段&#xff09;&#xff1a;beforeCreate&#xff0c;created 第二阶段&#xff08;挂载阶段&#xff09;&#xff1a;beforeMount&#xff08;render&#xff09;&#xff0c;mounted 第三阶段&#…

RT-DETR+Flask实现目标检测推理案例

今天&#xff0c;带大家利用RT-DETR&#xff08;我们可以换成任意一个模型&#xff09;Flask来实现一个目标检测平台小案例&#xff0c;其实现效果如下&#xff1a; 目标检测案例 这个案例很简单&#xff0c;就是让我们上传一张图像&#xff0c;随后选择一下置信度&#xff0c;…

ARM体系结构和接口技术(六)KEY按键实验① 按键轮询检测

文章目录 一、按键轮询&#xff08;一&#xff09;分析按键的电路连接1. 按键原理图2. 按键消抖 二、分析芯片手册&#xff08;一&#xff09; GPIO章节&#xff08;二&#xff09;RCC章节 三、代码&#xff08;一&#xff09;key.c&#xff08;二&#xff09;key.h 一、按键轮…

Python 魔法方法小结

目录 引言 &#x1f31f; 实例一&#xff1a;__init__构造方法 &#x1f31f; 实例二&#xff1a;__str__和__repr__方法 &#x1f31f; 实例三&#xff1a;__add__运算符重载 &#x1f31f; 实例四&#xff1a;__len__方法 &#x1f31f; 实例五&#xff1a;__getitem__…

从人工巡检到智能防控:智慧油气田安全生产的新视角

一、背景需求 随着科技的飞速发展&#xff0c;视频监控技术已成为各行各业保障安全生产、提升管理效率的重要手段。特别是在油气田这一特殊领域&#xff0c;由于其工作环境复杂、安全风险高&#xff0c;传统的监控方式已难以满足实际需求。因此&#xff0c;基于视频监控AI智能…