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://xiahunao.cn/news/3248046.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

跳动的爱 - 动态全屏爱心【前端版本】

要使用HTML、CSS和JavaScript绘制一个全屏且较大的爱心&#xff0c;并且让它有动态效果&#xff0c;可以通过以下步骤实现&#xff1a; HTML: 定义基本的页面结构。 CSS: 定义爱心的样式和动画效果。 JavaScript: 动态调整爱心的位置和大小&#xff0c;使其在页面上移动。 下面…

软考2024下半年考试时间是多少?哪个科目容易考?

软考2024下半年考试时间为 11月9日-12日 2024下半年软考共安排了12个资格的考试&#xff0c;具体为软考高级&#xff1a;系统分析师、系统架构设计师、网络规划设计师、系统规划与管理师&#xff1b;软考中级&#xff1a;软件设计师、网络工程师、信息安全工程师、信息系统监…

【C语言】联合体(union)

文章目录 1.联合体的含义2. 联合体的声明3. 联合体大小的计算4. 联合体的特点 1.联合体的含义 联合体也叫做共用体&#xff0c;是指联合体的所有成员共用同一块内存空间。这也就说明了&#xff0c;联合体的大小至少是其成员所占空间的最大值。 2. 联合体的声明 #include<…

Codeforces Round 675 (Div. 2) --- B. Nice Matrix (数学,模拟)

很容易想到 a i , m − j 1 a n − i 1 , m − j 1 a i , j a n − i 1 , j a_{i,m-j1} a_{n-i1,m-j1} a_{i,j} a_{n-i1,j} ai,m−j1​an−i1,m−j1​ai,j​an−i1,j​ 在本题中应该被满足。 这道题主要的难点是我们怎么找到一个数&#xff0c;让这四个数与找到的数…

学习008-01-02 Define the Data Model and Set the Initial Data(定义数据模型并设置初始数据 )

Define the Data Model and Set the Initial Data&#xff08;定义数据模型并设置初始数据 &#xff09; This topic explains how to implement entity classes for your application. It also describes the basics of automatic user interface construction based on a da…

PGCCC|【PostgreSQL】PG考证对工作上有什么好处# PG证书

认证 PostgreSQL 考证&#xff08;PostgreSQL Certification&#xff09;在工作上有以下几个好处&#xff1a; 增强专业能力&#xff1a;通过考证&#xff0c;可以系统地学习和掌握 PostgreSQL 数据库的知识和技能&#xff0c;提高自己的专业水平。 提升职业竞争力&#xff1…

Python 在Word表格中插入、删除行或列

Word文档中的表格可以用于组织和展示数据。在实际应用过程中&#xff0c;有时为了调整表格的结构或适应不同的数据展示需求&#xff0c;我们可能会需要插入、删除行或列。以下提供了几种使用Python在Word表格中插入或删除行、列的方法供参考&#xff1a; 文章目录 Python 在Wo…

【MySQL篇】Percona XtraBackup工具备份指南:常用备份命令详解与实践(第二篇,总共五篇)

&#x1f4ab;《博主介绍》&#xff1a;✨又是一天没白过&#xff0c;我是奈斯&#xff0c;DBA一名✨ &#x1f4ab;《擅长领域》&#xff1a;✌️擅长Oracle、MySQL、SQLserver、阿里云AnalyticDB for MySQL(分布式数据仓库)、Linux&#xff0c;也在扩展大数据方向的知识面✌️…

自动驾驶系列—智能巡航辅助功能中的车道变换功能介绍

文章目录 1. 背景介绍2. 功能定义3. 功能原理4. 传感器架构5. 实际应用案例5.1 典型场景1&#xff1a;换道时无其他交通参与者5.1.1 直道中的车道变换5.1.2 弯道中的车道变换5.1.3 综合场景应用 5.2 典型场景2&#xff1a;换道方向车道线非虚线5.3 典型场景3&#xff1a;换道方…

【 LCD1602显示屏】使用STC89C51控制1602显示、读写操作时序

文章目录 LCD1602显示概述&#xff1a;引脚说明控制指令接线 控制思路步骤 代码示例总结对databuffer dataShow;的理解 LCD1602显示 概述&#xff1a; LCD1602&#xff08;Liquid Crystal Display&#xff09;是一种工业字符型液晶&#xff0c;能够同时显示 1602 即 32 字符…

【机器学习入门】拥抱人工智能,从机器学习开始

拥抱人工智能&#xff0c;从机器学习开始 目录&#xff1a; 1. 机器学习&#xff1a;一种实现人工智能的方法 2. 机器学习算法&#xff1a;是使计算机具有智能的关键 3. Anaconda&#xff1a;初学Python、入门机器学习的首选 4. 总结 转载链接&#xff1a; 文章-阿里云开发者社…

【PostgreSQL】PostgreSQL 教程

博主介绍&#xff1a;✌全网粉丝20W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…

2024/07 近期关于AI的阅读和理解[笔记]

玩转API 快速开启 - ApiHug如何在15分钟内&#xff0c;使用 ApiHug 启动一个API开发项目.https://apihug.com/zhCN-docs/start &#x1f4d0;设计先行 通过统一的API 设计元语(DSL, domain specific language), 让API 设计更语言化&#xff08;Describe)&#xff1b;实现高度…

使用overleaf的详细教程分享(创建latex项目/上传期刊latex模板压缩包以及overleaf界面应用的详细介绍)

今天给大家分享一下overleaf的使用&#xff0c;主要包括 overleaf注册和登录&#xff1b;四种在overleaf里创建项目的方式&#xff1b;overleaf主界面各项操作功能介绍等详细教程。 一 overleaf注册和登录 overleaf官网&#xff1a; 可以选择使用Google账号登入&#xff0c;…

docker安装的postgres同时安装postgis

1.拉取镜像 docker pull registry.cn-hangzhou.aliyuncs.com/qiluo-images/postgres:latest2.创建一个 postgres 容器并启动 docker run -it --name postgres --restart always -e POSTGRES_PASSWORD123456 -e ALLOW_IP_RANGE0.0.0.0/0 -v /data/postgres/data:/var/lib/post…

对于RAC环境,如何修改集成的OSWatch工具的配置

OSWatch作为官方推荐的监控rac工具&#xff0c;OSWatch有着至关重要的作用&#xff0c;可以协助dba进行详细排查。在系统卡顿、网络异常等情况下&#xff0c;通过执行操作系统命令来收集系统资源使用情况&#xff0c;它是部署在服务器上的&#xff0c;并且对服务器的性能消耗极…

MySQL条件查询(DQL)

在此之前先给大家看一下我的表里面的数据&#xff0c;以方便接下来的讲解 还需要大家先熟悉这里面的条件 1.语法 SELECT 字段列表 FROM 表名 WHERE 条件列表 例如 1.查询年龄等于20的员工 select * from emp where age 20; 2.查询年龄小于等于20的员工信息 select * fr…

任意空间平面点云旋转投影至水平面—罗德里格旋转公式

1、背景介绍 将三维空间中位于任意平面上的点云数据&#xff0c;通过一系列的坐标变换&#xff08;平移旋转&#xff09;&#xff0c;使其投影到XOY平面上&#xff0c;同时保证点云的几何中心与XOY平面的原点重合&#xff0c;同时点云形状保持不变。具体效果如下&#xff0c;具…

springboot育婴经验分享平台-计算机毕业设计源码06078

摘要 随着现代社会对育儿知识的需求不断增长&#xff0c;家长们渴望找到一个可靠、便捷的平台来分享和获取育婴经验。为此&#xff0c;我们设计并实现了一个基于SpringBoot的育婴经验分享平台。该平台旨在为家长们提供一个互动交流的空间&#xff0c;让他们能够分享自己的育婴心…

如何通过企业微信会话存档保护企业利益?

赵总: 张经理&#xff0c;最近行业内频发数据泄露事件&#xff0c;我们的客户资料和内部沟通记录安全吗&#xff1f; 张经理: 赵总&#xff0c;我们已经采取了一系列措施来加强数据安全。特别是针对企业微信的沟通记录&#xff0c;我们最近引入了安企神软件&#xff0c;它能很…