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

news2024/9/23 23:27:23

一、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.coloradmin.cn/o/1933878.html

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

相关文章

Android10.0 锁屏分析-KeyguardPatternView图案锁分析

首先一起看看下面这张图&#xff1a; 通过前面锁屏加载流程可以知道在KeyguardSecurityContainer中使用getSecurityView()根据不同的securityMode inflate出来&#xff0c;并添加到界面上的。 我们知道&#xff0c;Pattern锁所使用的layout是 R.layout.keyguard_pattern_view&a…

【ESP32】打造全网最强esp-idf基础教程——18.ESP32连接MQTT Broker

ESP32连接MQTT Broker 一、MQTT Broker 在开始ESP32编程之前&#xff0c;我们要先来看看公共主流的MQTT服务器可供使用&#xff0c;所谓的公共MQTT服务器就是一些网站给我们提供了在线的MQTT Broker&#xff0c;我可以直接利用其进行 MQTT 学习、测试甚至是小规模使用&…

表格竖向展示

最近在做手机端web页面&#xff0c;页面中需要有个表格来显示数据&#xff0c;但是由于数据太多页面太窄&#xff0c;table展示横向滑动的话感觉很丑。所以让表格竖向显示了 具体页面如下: 实现代码&#xff1a;当然代码里面绑定的数据啊什么的你都可以修改为自己的内容&#…

【软件建模与设计】-05-软件建模和设计方法概览

目录 1、COMET基于用例的软件生命周期 1.1、需求建模 1.2、分析建模 1.3、设计建模 1.4、增量软件构建 1.5、增量软件集成 1.6、系统测试 2、COMET与其他软件过程比较 2.1、与RUP对比 2.2、与螺旋模型对比 3、需求、分析和设计建模 3.1、需求建模活动 3.2、分析建…

机器学习入门【经典的CIFAR10分类】

模型 神经网络采用下图 我使用之后发现迭代多了之后一直最高是正确率65%左右&#xff0c;然后我自己添加了一些Relu激活函数和正则化&#xff0c;现在正确率可以有80%左右。 模型代码 import torch from torch import nnclass YmModel(nn.Module):def __init__(self):super(…

【香橙派】Orange pi AIpro开发板评测,与树莓派的横向对比以及实机性能测试

一、前言 在人工智能领域飞速发展的时代&#xff0c;国产厂商们也是紧随时代的步伐&#xff0c;迅龙公司联合华为推出了一款全新的开发板 Orange pi AIpro 作为一款建设人工智能新生态的开发板&#xff0c;它可广泛适用于AI边缘计算、深度视觉学习及视频流AI分析、视频图像分析…

ssh远程登录另一台linux电脑

大部分的博客内容所说的安装好ssh服务后&#xff0c;terminal输入 ssh -p port_number clientnameserver_ip 之后输入密码等等就可以登上别人的电脑 但是这是有一个前提的&#xff0c;就是这两台电脑要在同一个局域网下面。 如果很远呢&#xff1f; 远到不在同一个网下面怎么办…

【智能算法应用】粒子群算法求解带出入点车间布局设计问题

目录 1.算法原理2.数学模型3.结果展示4.参考文献5.代码获取 1.算法原理 【智能算法】粒子群算法&#xff08;PSO&#xff09;原理及实现 设施布局问题&#xff08;Facility Layout Problem, FLP&#xff09;&#xff0c;主要目的是在给定的区域内有效地放置不同设备或部件&am…

大模型学习笔记十一:视觉大模型

一、判别式模型和生成式模型 1&#xff09;判别式模型Discriminative ①给某一个样本&#xff0c;判断属于某个类别的概率&#xff0c;擅长分类任务&#xff0c;计算量少。&#xff08;学习策略函数Y f(X)或者条件概率P(YIX)&#xff09; ②不能反映训练数据本身的特性 ③学习…

JavaScript学习笔记(九)

56、JavaScript 类 56.1 JavaScript 类的语法 请使用关键字 class 创建一个类。 请始终添加一个名为 constructor() 的方法。 JavaScript 类不是对象。 它是 JavaScript 对象的模板。 语法&#xff1a; class ClassName {constructor() { ... } }示例&#xff1a;例子创…

【无人值守】对数据中心电力分配系统发展的影响

数据中心在现代信息发展中承载着巨量数据的计算、存储、挖掘、分析和应用等多个方面的功能&#xff0c;是国计民生各行业的多样化的信息化的资产。对稳定的运行与安全运维是基本需求也是重要的保障。 数据中心属于高能耗产业&#xff0c;对用电负荷大且要求极度稳定。除了对电力…

一文-深入了解Ansible常见模块、安装和部署

1 Ansible 介绍 Ansible是一个配置管理系统configuration management system, python 语言是运维人员必须会的语言, ansible 是一个基于python 开发的&#xff08;集合了众多运维工具 puppet、cfengine、chef、func、fabric的优点&#xff09;自动化运维工具, 其功能实现基于ss…

HarmonyOS介绍

一、什么是HarmonyOS HarmonyOS是新一代的智能终端操作系统&#xff0c;为不同设备的智能化、互联与协同提供了统一的语言&#xff0c;为用户带来简捷、流畅、连续、安全可靠的全场景交互体验。 二、HarmonyOS的核心理念 1、一次开发 多端部署 指的是一个工程&#xf…

题解|2023暑期杭电多校05

【原文链接】 &#xff08;补发&#xff09;题解|2023暑期杭电多校05 1001.Typhoon 计算几何 题目大意 依次给定 n n n 个坐标 P P P &#xff0c;预测的台风路线为按顺序两两连接给定坐标所得的折线 现在有 m m m 个庇护所的坐标 S S S &#xff0c;求每个庇护所到台风…

基于AT89C51单片机的多功能自行车测速计程器(含文档、源码与proteus仿真,以及系统详细介绍)

本篇文章论述的是基于AT89C51单片机的多功能自行车测速计程器的详情介绍&#xff0c;如果对您有帮助的话&#xff0c;还请关注一下哦&#xff0c;如果有资源方面的需要可以联系我。 目录 选题背景 原理图 PCB图 仿真图 代码 系统论文 资源下载 选题背景 美丽的夜晚&…

c++树(一)定义,遍历

目录 树的定义 树的基本术语 树的初始起点&#xff1a;我们定义为根 树的层次&#xff1a; 树的定义&#xff1a; 树的性质 性质1&#xff1a; 性质2&#xff1a; 树形结构存储的两种思路 树的遍历模板 树上信息统计方式1-自顶向下统计 树上信息统计方式2-自底向上统…

【漏洞复现】泛微E-Cology WorkflowServiceXml SQL注入漏洞

0x01 产品简介 泛微e-cology是一款由泛微网络科技开发的协同管理平台&#xff0c;支持人力资源、财务、行政等多功能管理和移动办公。 0x02 漏洞概述 泛微OAE-Cology 接口/services/WorkflowServiceXml 存在SQL注入漏洞&#xff0c;可获取数据库权限&#xff0c;导致数据泄露…

Purple Pi OH在Android11下测试WiFi和LAN的TCP和UDP传输速率

本文适用于在Purple Pi OH在Andriod11下如何测试WiFi和LAN的TCP和UDP传输速率。触觉智能的Purple Pi OH鸿蒙开源主板&#xff0c;是华为Laval官方社区主荐的一款鸿蒙开发主板。 该主板主要针对学生党&#xff0c;极客&#xff0c;工程师&#xff0c;极大降低了开源鸿蒙开发者的…

C语言 ——— 在控制台上打印动态变化的菱形

目录 代码要求 代码实现 代码要求 输入 整数line &#xff0c;菱形的上半部分的长度就为line&#xff08;动态变化的菱形&#xff09; 菱形由 "*" 号构成 代码实现 #include<stdio.h> int main() {// 上半长int line 0;scanf("%d", &line)…

mysql常用函数五大类

mysql常用函数 1. 第一类&#xff1a;数值函数1.1 圆周率pi的值1.2 求绝对值1.3 返回数字的符号1.4 开平方&#xff0c;根号1.5 求两个数的余数1.6 截取正数部分1.7 向上取整数1.8 向下取整数1.9 四舍五入函数1.10 随机数函数1.11 数值左边补位函数1.12 数值右边补位函数1.13 次…