React 入门

一、官网地址

  1. 英文官网: https://reactjs.org/
  2. 中文官网: https://react.docschina.org/

二、React 特点

  1. 声明式编码
  2. 组件化编码
  3. React Native 编写原生应用
  4. 高效(优秀的 Diffing 算法)
  5. 高效的原因:1.使用虚拟DOM,不总是直接操作页面真是DOM。2.DOM Diffing 算法,最小化页面重绘。

三、React 基本使用

3.1 效果图

3.2 引入相关 js 库

1.react.js :  React 核心库

2.react-dom.js : 提供操作DOM 的react 扩展库。

3.babel.min.js : 解析JSX 语法代码转为 JS 代码的库。

3.3 JSX(JavaScript XML)

语法:React.createElement(component,props,...children)

作用:用来简化创建虚拟 DOM

用法:var Jdom = <h1>Hello World!</h1>

标签名:HTML标签或其他标签

标签属性:HTML标签属性或其他

使用规则:

  1. 遇到“<”开头的代码,以标签的语法解析:html同名标签转换为html同名元素,其他标签需要特别解析。
  2. 遇到以“{”开头的代码,以JS语法解析:标签中的JS表达式必须用{ }包含。

3.4 babel.js

  1. 浏览器不能直接解析 JSX 代码,需要babel 转译为纯 JS 的代码才能运行。
  2. 只要用了 JSX,都要加上 type=“text/babel”,表示需要babel来处理。

3.5 渲染虚拟 DOM 

语法:ReactDOM.render(虚拟DOM,DOM容器)

作用:将虚拟 DOM 元素渲染到页面中的真实容器 DOM 中显示。

参数说明:

参数一:纯 js 或jsx 创建的虚拟dom对象

参数二:用来包含虚拟  DOM 元素的真实 dom 元素对象。

3.6 完整代码展示

3.7 练习(代码下一个文章揭秘)

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

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

相关文章

vultr ubuntu 服务器远程桌面安装及连接

一. 概述 vultr 上开启一个linux服务器&#xff0c;都是以终端形式给出的&#xff0c;默认不带 ui 桌面的&#xff0c;那其实对于想使用服务器上浏览器时的情形不是很好。那有没有方法在远程服务器安装桌面&#xff0c;然后原程使用呢&#xff1f;至少ubuntu的服务器是有的&am…

搜索--找出克隆二叉树中的相同节点

题目描述 给你两棵二叉树&#xff0c;原始树 original 和克隆树 cloned&#xff0c;以及一个位于原始树 original 中的目标节点 target。 其中&#xff0c;克隆树 cloned 是原始树 original 的一个 副本 。 请找出在树 cloned 中&#xff0c;与 target 相同 的节点&#xff…

AGI时代,LLM可以在AutoML哪些环节进行增强?

当下大模型技术发展如火如荼&#xff0c;颇有改变各行业和各领域的架势。那么对于AutoML来讲&#xff0c;LLM对其有哪些助力&#xff1f;对于这个问题&#xff0c;我们来问一问kimi chat&#xff0c;看看它怎么回答&#xff1f; 大型语言模型&#xff08;LLM&#xff09;可以在…

React|获取oss存储的文件,并转为json格式

使用axios通过oss的url获取.xlsx文件流&#xff0c;处理后得到json格式数据&#xff1a; 安装xlsx&#xff1a; npm install xlsx import axios from "axios"; import * as XLSX from "xlsx";//#region xlsx(oss) to json async function getFileStream(u…

Successive Convex Approximation算法的学习笔记

文章目录 一、代码debug二、原理 本文主要参考了CSDN上的 另一篇文章&#xff0c;但规范了公式的推导过程和修缮了部分代码 一、代码debug 首先&#xff0c;我们将所有的代码放到MATLAB中&#xff0c;很快在命令行中出现了错误信息 很显然有问题&#xff0c;但是我不知道发生…

dm8用户配置免密登录

dm8用户配置免密登录 基础环境 操作系统&#xff1a;Red Hat Enterprise Linux Server release 7.9 (Maipo) 数据库版本&#xff1a;DM Database Server 64 V8 架构&#xff1a;单实例1 操作系统认证&#xff08;sysdba&#xff09; 1.1 官方文档 《DM8安全管理》手册 2 用户…

湖仓管理系统 Amoro部署

简介 Apache Amoro(incubating) 是一个构建在 Apache Iceberg 等开放数据湖表格之上的湖仓管理系统,提供了一套可插拔的数据自优化机制和管理服务,旨在为用户带来开箱即用的湖仓使用体验。 Amoro 的愿景是依托于 Apache Iceberg、Apache Paimon 等新型数据湖表格式的基础功…

Java:线程、进程、多线程

在Java中&#xff0c;线程、进程和多线程是实现并发编程的关键概念。理解它们的定义、特点和如何使用它们对于创建高效、响应迅速的应用程序至关重要。 进程&#xff08;Process&#xff09; 进程是操作系统分配资源和调度的基本单位&#xff0c;它包含了程序的执行状态和所需…

微信小程序媒体查询

在微信小程序中&#xff0c;media媒体查询不支持screen关键字&#xff0c;因为小程序页面是再webview中渲染的&#xff0c;而不是在浏览器中渲染的。 在设置样式时&#xff0c;可以使用 wxss 文件中的 media 规则来根据屏幕宽度或高度设置不同的样式。 device-width:设备屏幕…

redis 性能管理

一、查看 redis 内存使用 info memory 1&#xff0c; 进入 redis 查看 2&#xff0c; redis 外查看 二 内存碎片率 1&#xff0c;used_memory_rss 表示该进程所占物理内存的大小&#xff0c;即为操作系统分配给 Redis 实例的内存大小。 2&#xff0c;used_memory Redis …

手机领域的平台之战

平台应用的模式最早是从手机应用开始的。在管理软件领域&#xff0c;最早是各厂商自己做自己的App。OA厂商、CRM厂商、HR厂商等等&#xff0c;都推自己的APP。现在逐步放弃了自有App&#xff0c;转向小程序。也就是平台之战第一阶段结束&#xff0c;几个大厂干掉了千千万万个小…

git如何正确合并分支

在 Git 中&#xff0c;合并分支是一个常见的操作&#xff0c;它允许你将一个分支的更改集成到另一个分支中。以下是一些正确合并分支的步骤和最佳实践&#xff1a; 合并前需要add和commit -m 提交到本地仓库在进行合并 1. 查看分支状态 在合并之前&#xff0c;最好先查看当前仓…

【智能算法】猎豹优化器(CO)原理及实现

目录 1.背景2.算法原理2.1算法思想2.2算法过程 3.结果展示4.参考文献 1.背景 2022年&#xff0c;MA Akbari等人受到自然界中猎豹捕猎行为启发&#xff0c;提出了猎豹优化器&#xff08;The Cheetah Optimizer&#xff0c;CO&#xff09;。 2.算法原理 2.1算法思想 CO法对猎…

机器学习的模型校准

背景知识 之前一直没了解过模型校准是什么东西&#xff0c;最近上班业务需要看了一下&#xff1a; 模型校准是指对分类模型进行修正以提高其概率预测的准确性。在分类模型中&#xff0c;预测结果通常以类别标签形式呈现&#xff08;例如&#xff0c;0或1&#xff09;&#xf…

Python程序设计 单例模式

1. 单例设计模式 设计模式设计模式 是 前人工作的总结和提炼&#xff0c;通常&#xff0c;被人们广泛流传的设计模式都是针对 某一特定问题 的成熟的解决方案使用 设计模式 是为了可重用代码、让代码更容易被他人理解、保证代码可靠性单例设计模式目的 —— 让 类 创建的对象&…

mac 上通过命令行挂载NTFS硬盘,使其可以进行读写

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言1. 安装 osxfuse 和 ntfs-3g2. 挂载 NTFS 硬盘3. 卸载 NTFS 硬盘4. 自动挂载1. 找出设备UUID2. 编辑 /etc/fstab 文件3. 添加挂载信息4. 保存并退出编辑器5. 重…

【THM】Nmap Advanced Port Scans(高级端口扫描)-初级渗透测试

介绍 本房间是Nmap系列的第三个房间(网络安全简介模块的一部分)。在前两个房间中,我们了解了实时主机发现和基本端口扫描。 Nmap实时主机发现Nmap基本端口扫描Nmap高级端口扫描Nmap后端口扫描在Nmap基本端口扫描中,我们介绍了TCP标志并回顾了TCP 3 路握手。要启动连接,TC…

AcWing刷题-约数个数

约数的个数 代码 # 计数 def f(x)->int:cnt 0i 1while i * i < x:if x % i 0:cnt 1if i * i < x:cnt 1i 1return cntn int(input()) a list(map(int,input().split())) for i in a:print(f(i))

HDFSRPC通信框架参数详解

写在前面 请先阅读HDFSRPC通信框架详解&#xff0c;对整体框架先有一定的了解。 参数列表 参数默认值描述ipc.server.read.connection-queue.size100readeripc.server.read.threadpool.size1readeripc.server.listen.queue.size128Listener:backlogipc.server.tcpnodelaytru…

Generative AI for Beginners

Generative AI for Beginners 微软推出的面向初学者的免费生成式人工智能课程。 课程章节相关教学内容学习目标课程介绍和学习环境设置学习环境配置和课程结构在学习本课程的同时帮助您取得成功生成式人工智能和 LLMs 介绍知识点: 生成式人工智能以及我们如何适应当前的技术格…