React简单了解
原理简化了解
import React from "react"
import { createRoot } form "react-dom/client"const element = React.createElement('p',{id: 'hello'},'Hello World!'
)const container = document.querySelector('#root')
const root = createRoot(container)
root.render()
编写一个自定义的render函数,该函数接受“React元素”和对container的引用:
function render(reactElement, containerDOMElement) {// 创建一个DOM对象const domElement = document.createElement(reactElement.type)// 更新属性domElement.innerHTML = reactElement.children;for (const key in reactElement.props) {const value = reactElement.props[key];domElement.setAttribute(key, value);}// 添加为子节点containerDOMElement.appenChild(domElement)}const reactElement = {type: 'a',props: {href: 'https://wikipedia.org/',id: 'some-links','data-num': 20,},children: 'Read more on Wikipedia',
};const containerDOMElement =document.querySelector('#root');render(reactElement, containerDOMElement);
expression slots
我们可以使用大括号 ( {}
) 创建expression slots,任何放在大括号之间的内容都将被视为纯 JavaScript,而不是字符串。
JSX 在编译时并不会检查expression solts是否有效!它只是将内容转发到纯 JS 输出,并不会做任何额外的事情。
import React from "react"
import { render } from “react-dom”const shopping_list = ["apple", "banana", "carrot"];const element = (<div>Purchase: {shopping_list.length}</div>
)const compliedElement = React.createElement("div",{},"Purchase: "shoppingList.length
)const root = document.querySelector("#root");// render(element, root)
render(compliedElement, root);
你会发现程序输出没有任何变化!
所以如果你在expression slot中做一些条件判断的语句,它会发生错误,但这错误并不是jsx不允许,而是javascript不允许。
import React from "react"
import { render } from “react-dom”const shopping_list = ["apple", "banana", "carrot"];const element = (<div>Purchase: {if ( shoppingList.length < 5) "Almost done!"}</div>
)const compliedElement = React.createElement("div",{},"Purchase: "if ( shoppingList.length < 5) "Almost done!"
)const root = document.querySelector("#root");// render(element, root)
render(compliedElement, root);
很显然,我们不能将这种条件判断语句这样放在函数的参数中。
HTML与JSX的区别
JSX 看起来像 HTML,但有一些根本的区别
关键字的保留
JavaScript 有几十个“关键字”。关键字是具有内置功能的关键字。因为它们已经做了一些事情,所以我们不能在 JSX 中使用它们。
但有一个问题,就是 HTML 属性有时与 JavaScript 关键字重叠。
const element = (<div><label for="name">Name:</label><inputid="name"class="fun-input"/></div>
);
如果我们将其编译成 JavaScript,我们会发现我们使用了两个保留字:for,class。
为了解决这个冲突,React 对这两个术语使用了细微的变化:
-
for
改为htmlFor
class
更改为className
const element = (<div><label htmlFor="name">Name:</label><inputid="name"className="fun-input"/></div>
);
区分大小写的属性
在 JSX 中,我们的属性需要是“camelCase” ,这是有效的html:
<videosrc="/videos/cat-skateboarding.mp4"autoplay="true"
>
在 JSX 中,我们需要将“autoplay”中的“p”大写,因为“auto”和“play”是不同的词:
const element = (<videosrc="/videos/cat-skateboarding.mp4"autoPlay={true}// ^ Capital “P”/>
);
style的应用
html中我们可以这么写:
<article style="filter: var(--shadow-elevation-high)"></article>
但在jsx中肯定是不行的,需要如下所示:
<article style={ { filter: "var(--shadow-elevation-high)" } }></article>
我们需要往expression slots中传入一个对象。
还有jsx标签必须闭合、必须小写等等。
空格陷阱
import { createRoot } from 'react-dom/client';const daysUntilSantaReturns = 123;const element = (<div><strong>Days until Santa returns:</strong>{daysUntilSantaReturns}</div>
);const container = document.querySelector('#root');
const root = createRoot(container);
root.render(element);
如上代码显示的会是:returns:123,而不是returns: 123,粗体文本和数字之间没有空格。
为什么会这样呢?
让我们考虑一下这个 JSX 如何编译为 JavaScript
const element = React.createElement('div',{},React.createElement('strong',{},'Days until Santa returns:'),daysUntilSantaReturns
);
请记住, JSX 不会编译为 HTML,它会编译为 JavaScript。当执行该 JavaScript 时,它只会创建并附加两个 HTML 节点:
那么我们该如何解决呢?最常见的解决方案是在大括号中添加单个空白字符:
<div><strong>Days until Santa returns:</strong>{' '}{daysUntilSantaReturns}
</div>
然而在 HTML 中,每个空白字符(以及换行符!)都会产生一个可见的空格。例如,假设我们有 3 个并排的图像(请参见下面的代码游乐场)。默认情况下,HTML 将在它们之间使用单个空白字符来呈现它们。
相关文章:
React简单了解
原理简化了解 import React from "react" import { createRoot } form "react-dom/client"const element React.createElement(p,{id: hello},Hello World! )const container document.querySelector(#root) const root createRoot(container) root.r…...
基于LabVIEW的USRP信道测量开发
随着无线通信技术的不断发展,基于软件无线电的设备(如USRP)在信道测量、无线通信测试等领域扮演着重要角色。通过LabVIEW与USRP的结合,开发者可以实现信号生成、接收及信道估计等功能。尽管LabVIEW提供了丰富的信号处理工具和图形…...
Docker挂载
目录 数据卷挂载 本地目录挂载 数据卷挂载 宿主机默认的存放所有容器数据卷的目录:/var/lib/docker/volumes nginx容器 静态文件目录:/usr/share/nginx/html 配置文件目录:/etc/nginx/nginx.conf 修改宿主机的内容,进入到容器查…...
使用Java结合经纬度位置计算目标点的日出日落时间
目录 前言 一、应用示例 1、天安门升旗时间 2、湖南省日出日落信息 二、JAVA日出日落计算 1、在线API 2、使用Java进行计算 三、总结 前言 随着城市化进程的加速,城市环境与人类生活的联系日益紧密。城市不仅承载着居住、工作、休闲等多种功能,也…...
八字精批api接口_php获取生成八字和批注的方法研究
八字算命 API 介绍 这个八字算命 API 提供了一种便捷的方式,让用户通过 GET 或 POST 请求获取详细的八字信息。API 返回的数据格式为 JSON,包含多种命理分析和建议,适合对传统命理学感兴趣的用户。 API 功能 五行分析: 提供用户…...
docker run 命令参数
user docker run -it --nameubn18 --gpus all --privilegedtrue --shm-size 8G ubuntu:18.04 /bin/bash-it 是什么意思 4o 在运行 docker run 命令时,-it 是两个选项的组合,用于更好地与容器进行交互: -i 或 --interactive:这个选…...
智能外呼技术如何改变企业营销方式
智能外呼技术如何改变企业营销方式 作者:开源大模型智能呼叫中心系统FreeAICC,Github:https://github.com/FreeIPCC/FreeAICC 在数字化时代,企业营销方式正经历着前所未有的变革。其中,智能外呼技术作为一项前沿的人…...
redis数据转移
可能有时候因为硬件的原因我们我们需要更换服务器,如果更换服务器的话,那我们redis的数据该怎样转移呢,按照一下步骤即可完成redis数据的转移 1.进入redis客户端 2.使用 bgsave命令进行数据的备份,此命令完成后会在你的redis安装目…...
STM32-笔记5-按键点灯(中断方法)
1、复制03-流水灯项目,重命名06-按键点灯(中断法) 在\Drivers\BSP目录下创建一个文件夹exti,在该文件夹下,创建两个文件exti.c和exti.h文件,并且把这两个文件加载到项目中,打开项目工程文件 加载…...
DotNetBrowser 3.0.0 正式发布!
🛠️ 重要消息:DotNetBrowser 3.0.0 正式发布! 我们很高兴向您介绍全新的 DotNetBrowser 3.0.0 版本。此次更新带来了多项重要功能与优化,进一步提升了 Web 开发的效率和体验。 📢 DotNetBrowser 3.0.0 包含哪些新功…...
MySQL基础笔记(三)
在此特别感谢尚硅谷-康师傅的MySQL精品教程 获取更好的阅读体验请前往我的博客主站! 如果本文对你的学习有帮助,请多多点赞、评论、收藏,你们的反馈是我更新最大的动力! 创建和管理表 1. 基础知识 1.1 一条数据存储的过程 存储数据是处理数…...
SEO初学者-搜索引擎如何工作
搜索引擎基础搜索引擎是如何建立索引的搜索引擎如何对网页进行排名搜索引擎是如何个性化搜索结果的 搜索引擎的工作方式是使用网络爬虫抓取数十亿个页面。爬虫也称为蜘蛛或机器人,它们在网络上导航并跟踪链接以查找新页面。然后,这些页面会被添加到搜索引…...
在Ubuntu下运行QEMU仿真FreeBSD riscv64系统
在Ubuntu下运行QEMU仿真FreeBSD riscv64系统 突发奇想,尝试在Ubuntu下运行QEMU仿真FreeBSD riscv64系统, 参考这篇文档:手把手教你在QEMU上运行RISC-V Linux_qemu 运行 .bin-CSDN博客 并参考FreeBSD的Wiki:riscv - FreeBSD Wik…...
SQL 使用带聚集函数的联结
聚集函数用于汇总数据,通常用于从一个表中计算统计信息,但也可以与联结一起使用。以下是一个例子,展示如何使用聚集函数统计每个顾客的订单数。 示例 1:使用 COUNT() 函数与 INNER JOIN 假设我们需要检索所有顾客及每个顾客所下…...
Linux网络功能 - 服务和客户端程序CS架构和简单web服务示例
By: fulinux E-mail: fulinux@sina.com Blog: https://blog.csdn.net/fulinus 喜欢的盆友欢迎点赞和订阅! 你的喜欢就是我写作的动力! 目录 概述准备工作扫描服务端有那些开放端口创建客户端-服务器设置启动服务器和客户端进程双向发送数据保持服务器进程处于活动状态设置最小…...
爬取Q房二手房房源信息
文章目录 1. 实战概述2. 网站页面分析3. 编写代码爬取Q房二手房房源信息3.1 创建项目与程序3.2 运行程序,查看结果 4. 实战小结 1. 实战概述 本次实战项目旨在通过编写Python爬虫程序,抓取深圳Q房网上的二手房房源信息。我们将分析网页结构,…...
【JavaEE初阶】线程 和 thread
本节⽬标 认识多线程 掌握多线程程序的编写 掌握多线程的状态 一. 认识线程(Thread) 1概念 1) 线程是什么 ⼀个线程就是⼀个 "执⾏流". 每个线程之间都可以按照顺序执⾏⾃⼰的代码. 多个线程之间 "同时" 执⾏着多份代码. 还…...
【IMU:视觉惯性SLAM系统】
视觉惯性SLAM系统简介 相机(单目/双目/RGBD)与IMU结合起来就是视觉惯性,通常以单目/双目IMU为主。 IMU里面有个小芯片可以测量角速度与加速度,可分为6轴(6个自由度)和9轴(9个自由度)IMU,具体的关于IMU的介…...
【python实现烟花】
可以使用 Python 的 turtle 模块来实现烟花效果。下面是一个简单的示例代码,展示如何用 turtle 绘制烟花: import turtle import random# 设置屏幕 screen turtle.Screen() screen.bgcolor("black")# 创建烟花函数 def draw_firework(x, y):…...
OpenCV学习——图像融合
import cv2 as cv import cv2 as cvbg cv.imread("test_images/background.jpg", cv.IMREAD_COLOR) fg cv.imread("test_images/forground.png", cv.IMREAD_COLOR)# 打印图片尺寸 print(bg.shape) print(fg.shape)resize_size (1200, 800)bg cv.resize…...
CS 144 check6: buiding an IP router
Lecture Notes Exercises 路由器的任务是根据路由表转发接收到的数据报:路由表是一系列规则,用于指导路由器针对任何给定的数据报应如何进行转发。 发送出什么接口。下一跳的IP地址。 这个check的工作是实现一个路由器,它可以为任何给定的…...
Pytorch | 从零构建ResNet对CIFAR10进行分类
Pytorch | 从零构建ResNet对CIFAR10进行分类 CIFAR10数据集ResNet核心思想网络结构创新点优点应用 ResNet结构代码详解结构代码代码详解BasicBlock 类ResNet 类ResNet18、ResNet34、ResNet50、ResNet101、ResNet152函数 训练过程和测试结果代码汇总resnet.pytrain.pytest.py 前…...
Spring整合Redis基本操作步骤
Spring 整合 Redis 操作步骤总结 1. 添加依赖 首先,在 pom.xml 文件中添加必要的 Maven 依赖。Redis 相关的依赖包括 Spring Boot 的 Redis 启动器和 fastjson(如果需要使用 Fastjson 作为序列化工具): <!-- Spring Boot Re…...
java中的方法的重载和重写、构造器
目录 方法的重载和重写、构造器1.java的修饰符:2.普通方法3.构造器(也叫构造方法/构造函数)4.方法的重载5.补充6.方法的重写7.类的执行顺序8.再看方法的重写 方法的重载和重写、构造器 1.java的修饰符: public修饰的代码…...
Vite 系列课程|1课程道路,2什么是构建工具
Vite 系列课程 1. 课程导论 1.1 为什么要学习 Vite? 1.1.1 Webpack vs. Vite:新旧霸主的交替? Webpack 长期以来一直是前端构建工具的事实标准,拥有庞大的用户群体、成熟的生态系统和丰富的学习资源。然而,随着前端技术…...
【蓝桥杯选拔赛真题96】Scratch风车旋转 第十五届蓝桥杯scratch图形化编程 少儿编程创意编程选拔赛真题解析
目录 scratch风车旋转 一、题目要求 编程实现 二、案例分析 1、角色分析 2、背景分析 3、前期准备 三、解题思路 1、思路分析 2、详细过程 四、程序编写 五、考点分析 六、推荐资料 1、入门基础 2、蓝桥杯比赛 3、考级资料 4、视频课程 5、python资料 scratc…...
SQL血缘解析
Druid 作为使用率特别高的的数据库连接池工具,在具备完善的连接池管理功能外,同时Druid 的 SQL解析功能可以用来防止 SQL注入等安全风险。通过对 SQL 语句进行解析和检查,Druid 可以识别并阻止潜在的恶意 SQL 语句执行,黑名单(阻止特定的 SQL 语句执行)、白名单(仅允许特…...
Docker 部署机器学习模型
1.编写机器学习代码 (1)新建一个 mlmodel.py import numpy as np import pandas as pd from sklearn.datasets import load_iris from sklearn.model_selection import train_test_split from sklearn.linear_model import LogisticRegression from sk…...
leetcode 面试经典 150 题:无重复字符的最长子串
链接无重复字符的最长子串题序号3类型字符串解题方法滑动窗口难度中等 题目 给定一个字符串 s ,请你找出其中不含有重复字符的 最长子串 的长度。 示例 1: 输入: s “abcabcbb” 输出: 3 解释: 因为无重复字符的最长子串是 “abc”,所以其长度为 3。 …...
LeetCode 283. 移动零 (C++实现)
1. 题目描述 给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序。 请注意 ,必须在不复制数组的情况下原地对数组进行操作。 示例 1: 输入: nums [0,1,0,3,12] 输出: [1,3,12,0,0] 示例 …...
基于Spring Boot的个人财务系统
一、系统背景与目的 随着全球经济的发展和人们生活水平的提高,个人财务管理变得越来越重要。传统的个人财务软件存在操作复杂、用户体验差、数据不安全等问题,无法满足用户的个性化需求。因此,开发一种基于Spring Boot的个人财务系统&#x…...
【计算机网络2】计算机网络的性能能指标
目录 一 、计算机网络的性能指标 二、具体介绍 1、速 率 2、带 宽 3、吞 吐 量 4、时 延 5、时延带宽积 6、往 返 时 延 7、信道利用率 一 、计算机网络的性能指标 计算机网络的性能指标就是从不同方面度量计算机网络的性能,有如下7个指标: 速…...
Axure RP9 的详细安装及Axure入门应用
文章目录 一、Axure 是什么?二、Axure 的应用场景三、Axure 安装1. 下载安装2. 汉化授权 附:下载链接 一、Axure 是什么? 1、Axure 是一种强大的原型设计工具,它可以帮助设计师和产品经理快速创建交互式的、高保真度的原型,并进行用户体验…...
Scala学习记录 如何打印输出
在Scala中,打印输出可以通过多种方式实现,以下是一些常见的打印输出方法: 1.使用printf()方法: 这是一种传统的C语言风格的打印方式,通过格式化字符串来控制输出的格式。例如,printf("整数:…...
内网IP段介绍与汇总
IPV4内网段 IP地址段地址范围地址数量用途描述0.0.0.0/80.0.0.0–0.255.255.25516777216SoftwareCurrent network (only valid as source address).10.0.0.0/810.0.0.0–10.255.255.25516777216Private networkUsed for local communications within a private network.100.64…...
js常用方法之: 预览大图(uniapp原生方法封装)
方法: //预览图片 pic可传单个图片地址字符串 或 图片数组(带index) previewPic: function(pic, index) {if (!pic) return;if (index undefined) {let array [];array.push(pic);uni.previewImage({urls: array,current: array[0]});} else {uni.previewImage({urls: pic,…...
人脸生成3d模型 Era3D
从单视图图像进行3D重建是计算机视觉和图形学中的一项基本任务,因为它在游戏设计、虚拟现实和机器人技术中具有潜在的应用价值。早期的研究主要依赖于直接在体素上进行3D回归,这往往会导致过于平滑的结果,并且由于3D训练数据的限制࿰…...
「Mac畅玩鸿蒙与硬件46」UI互动应用篇23 - 自定义天气预报组件
本篇将带你实现一个自定义天气预报组件。用户可以通过选择不同城市来获取相应的天气信息,页面会显示当前城市的天气图标、温度及天气描述。这一功能适合用于动态展示天气信息的小型应用。 关键词 UI互动应用天气预报数据绑定动态展示状态管理 一、功能说明 自定义…...
深圳龙岗戴尔dell r730xd服务器故障维修
深圳龙岗一台DELL POWEREDGE R730XD服务器系统故障问题处理: 1:客户工厂年底产线整改,时不时的会意外断电,导致服务器也频繁停机, 2:多次异常停机后导致服务器开机后windows server系统无法正常启动了&…...
lxml提取某个外层标签里的所有文本
html如下 <div data-v-1cf6f280"" class"analysis-content">选项D错误:<strong>在衡量通货膨胀时,</strong><strong>消费者物价指数使用得最多、最普遍</strong>。 </div> 解析html文本 fro…...
【AI图像生成网站Golang】项目测试与优化
AI图像生成网站 目录 一、项目介绍 二、雪花算法 三、JWT认证与令牌桶算法 四、项目架构 五、图床上传与图像生成API搭建 六、项目测试与优化 六、项目测试与优化 在开发过程中,性能优化是保证项目可扩展性和用户体验的关键步骤。本文将详细介绍我如何使用一…...
使用Docker启用MySQL8.0.11
目录 一、Docker减小镜像大小的方式 1、基础镜像选择 2、减少镜像层数 3、清理无用文件和缓存 4、优化文件复制(COPY和ADD指令) 二、Docker镜像多阶段构建 1、什么是dockers镜像多阶段构建 1.1 概念介绍 1.2 构建过程和优势 2、怎样在Dockerfil…...
部署Mysql、镜像和容器、常见命令
目录 部署Mysql 镜像和容器 常见命令 部署Mysql 可以有多个容器 docker run -d \--name mysql \-p 3306:3306 \-e TZAsia/Shanghai \-e MYSQL_ROOT_PASSWORD123 \mysql docker run -d \--name mysql2 \-p 3307:3307 \-e TZAsia/Shanghai \-e MYSQL_ROOT_PASSWORD123 \mys…...
Windows部署Docker及PostgreSQL数据库相关操作
一、Windows安装Docker 1.wsl安装 以管理员身份启动命令行,运行:wsl --install; 安装结束后,重启电脑,以管理员身份启动命令行,运行:wsl --install -d Ubuntu; 中间需要输入用户名…...
Halcon例程代码解读:安全环检测(附源码|图像下载链接)
安全环检测核心思路与代码详解 项目目标 本项目的目标是检测图像中的安全环位置和方向。通过形状匹配技术,从一张模型图像中提取安全环的特征,并在后续图像中识别多个实例,完成检测和方向标定。 实现思路 安全环检测分为以下核心步骤&…...
Unity3D用正则判断身份证号或邮箱
系列文章目录 unity工具 文章目录 系列文章目录👉前言👉一、正则判断邮箱格式👉二、正则判断身份证号👉壁纸分享👉总结👉前言 C#正则表达式(Regex)是一种用来匹配字符串模式的强大工具。在C#中,可以使用System.Text.RegularExpressions命名空间下的Regex类来处…...
PostgreSQL表达式的类型
PostgreSQL表达式是数据库查询中非常重要的组成部分,它们由一个或多个值、运算符和PostgreSQL函数组合而成,用于计算出一个单一的结果。这些表达式类似于公式,可以用查询语言编写,并用于查询数据库中的特定数据集。 PostgreSQL表…...
C++简明教程(文章要求学过一点C语言)(10)
类的教程 C 类的完整教程 C 中,类(class)是面向对象编程的核心概念,用于定义对象的属性(数据成员)和行为(成员函数)。本教程将带你从零开始,循序渐进地学习如何定义和使…...
从腾讯云的恶意文件查杀学习下PHP的eval函数
问题来自于腾讯云的主机安全通知: 🚀一键接入,畅享GPT及AI大模型服务!【顶级API中转品牌】: https://api.ablai.top/ 病毒文件副本内容如下: <?php function x($x){eval($x);}x(str_rot13(riny($_CBF…...
OpenWRT——官方镜像安装Docker(网络环境需设置)并配置Sun-Panel
Pro更多功能预览地址https://pro.sun-panel.top/#/hpage/pro Github地址https://github.com/hslr-s/sun-panel?tabreadme-ov-file 首先确认宿主机网络环境符合要求 curl Google.com1.确认没问题后开始安装Docker opkg update opkg install dockerd docker luci-app-docker…...