01-React入门

React概述

react是什么？

React用于构建用户界面的JS库。是一个将数据渲染为HTML视图的开源JS库。

为什么学？

1.原生JS操作DOM繁琐，效率低

2.使用JS直接操作DOM,浏览器会进行大量的重绘重排

3.原生JS没有组件化编码方案，代码复用低

在学习之前最好看一下关于npm的知识：下面是我在网上看见的一个写的还不错的npm的文章

npm

React的特点

1.组件化开发，声明式编码，提高效率

  • 组件化开发：把复杂的代码，拆成一块一块组件，模块化开发
  • 声明式编码：比如我写了一个页面，页面上有一个蓝色的图形，我想改这个图形的颜色，我只需要通过改某个命令或者传入的某个参数就可以实现颜色的修改，不需要去修改这个页面代码，这便是声明式编码

2.在React Native中，使用React进行移动端开发

3.使用虚拟DOM+Diffing算法，减少真实DOM操作，大大提升效率

  • 虚拟DOM，是一种空间换时间的做法，数据先到虚拟DOM上，再通过虚拟DOM映射到真实DOM上，这种做法只有第一次页面加载时会稍慢一些（因为加了一层虚拟DOM到真实DOM的映射）。但是在后续数据变更，DOM修改的时候，就会明显体现优势。以前DOM更新操作只会去更新全体数据区域，消耗极大，而虚拟DOM在更新前会进行比对（Diffing算法），只更新需要更新的内容，减少新建开销，从而优化性能

以H5+JS引入的原生方式开始React

依赖导入

在这里插入图片描述
既然是原生H5，那么就要用script标签引入React的js依赖
介绍一下需要的js依赖，这三个是非常基础的库，而且一定要按图上固定的顺序导入
在这里插入图片描述

最后引入babel标签，告诉编译器，这里需要去从JSX转换成JS
在这里插入图片描述
注意：<script type="text/babel">如果类型写错了，会发生错误，导致浏览器不认识标签，因为JS中根本没有标签这一说
在这里插入图片描述

控制台信息

正常运行控制台会提示的信息
在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en"><head><title>Hello React!</title><meta charset="UTF-8"><!-- 动态适配 --><meta name="viewport" content="width=device-width, initial-scale=1"><link href="css/style.css" rel="stylesheet"></head><body><div id="test"></div><!--真实DOM--><script type="text/javascript" src="../js/react.development.js"></script> <!--React核心的库--><script type="text/javascript" src="../js/react-dom.development.js"></script><!--React操作Dom相关库--><script type="text/javascript" src="../js/babel.min.js"></script><!--将JSX转换成JS用的依赖，因为浏览器不认识JSX，只认识JS--><!-- 最后引入babel标签，这里是告诉编译器这里是JSX，需要用babel转换成JS文件如果不小心写成其他的类型，那么浏览器就无法编译通过 --><script type="text/babel">// 虚拟DOM创建const virDom=<h1>hello React</h1>// 将虚拟DOM渲染到某个指定的真实DOM上面ReactDOM.render(virDom,document.getElementById("test"))</script></body>
</html>

用JS和JSX分别创建虚拟DOM

前置条件依旧是引入上面的三个依赖

用JS创建虚拟DOM

其实JS也可以做成类似于JSX的写法
首先回顾一下
传统创建真实DOM元素，可以通过操作document对象来进行创建

document.createElement("div")

而我们创建虚拟DOM，因为我们引入了React依赖，所以就可以通过React对象创建虚拟DOM。注意，即使是JS创建，也不可以想当然的用双引号把元素括起来，因为React不认识这种写法

React.createElement("标签名","标签属性","标签内容")
例子：
const virDom=React.createElement("h1",{id:'title'},'这是内容')

这样我们就通过JS创建了一个虚拟DOM元素，但是这种创建方式创建单层元素还好，一旦创建很多元素就会非常麻烦

比如我要在DIV里面套一个span（span没属性）就得这样：

const virDom=React.createElement("h1",{id:'title'}, React.createElement("span",{},'这是span内容'))
如果元素过多就得层层套娃，非常痛苦

最后渲染指定真实DOM即可，注意这里就有意思了，因为是JS创建的，所以标签类型指定了JS，而不是Babel

<script type="text/javascript">const virDom=React.createElement("h1",{id:'title'}, React.createElement("span",{},'这是span内容'))// 虚拟DOM创建// 将虚拟DOM渲染到某个指定的真实DOM上面ReactDOM.render(virDom,document.getElementById("test"))
</script>

测试肯定好用，就不演示了

但这样非常麻烦，一个元素就快累疯了，所以引入了JSX

用JSX创建虚拟DOM

此时用JSX就非常容易标签套娃了
const定义的时候套一层括号代表是一个整体，写完标签，渲染到真实DOM上就可以了

 <script type="text/babel">// 虚拟DOM创建，JSX开始套娃const virDom=(<h1><h2><div>123</div></h2></h1>)// 将虚拟DOM渲染到某个指定的真实DOM上面ReactDOM.render(virDom,document.getElementById("test"))</script>

这里需要注意，因为JSX是JS+XML，所以如果不是单纯的标签语言，混入了一些JS，那么一定要用{}把JS代码括起来

const virDom=(<div><h1>前端js框架列表</h1><ul>{data.map((item,index)=>{return <li key={index}>{item}</li>})}</ul>               </div>           )

JSX—>JS原理

所以到这里，大概就可以才出来babel的原理了
通过babel把写好的JSX，一层一层标签去挨个套娃转换，最终转换成这种React.createElement的JS创建形式。

    const virDom=React.createElement("h1",{id:'title'}, React.createElement("span",{},React.createElement(...n层标签)))

这也就是为什么前面控制台说，不建议用生产环境用Babel转换，这种转换的方式标签少的话还好，如果大量去现场从JSX转换成JS，那么会非常耗时，用户一进来看见一个白画面（等待从JSX转换成JS），这是很不友好的。后面开发时会替代这种写法。

虚拟DOM和真实DOM比较

关于虚拟DOM，本质就是Object，即为一般对象，所以相对于一个真实的DOM来说，更轻。
虚拟DOM是React内部在处理，无需真实DOM上的那么多属性。
但最后虚拟DOM还是会被转化为真实DOM，最后呈现在画面上。

在这里插入图片描述真实DOM具有很多的属性
在这里插入图片描述

JSX语法

定义JSX的时候不要写引号

JSX在创建虚拟DOM的时候，不可以用字符串引号创建，会导致无法识别
在这里插入图片描述

标签中混入JS表达式的时候要用{}

在JSX中，想用JS必须要用{}套一下，套完代码就会被认为是JS代码

比如给一个div标签设置id，利用{}进行读取

在这里插入图片描述
运行代码，则可以发现读取成功
在这里插入图片描述

样式类名

注意，React标签中，没有class属性，因为如果写了class就与ES6的语法相冲突，所以这里的class属性改名为className

如果React代码里写了class，就会被控制台提示是否是写错了

注意，class属性的话，是不需要去用{}进行插值的，这属于原生的代码

例子

在title属性中，定义一个css样式，准备在后面标签引用
在这里插入图片描述
在标签中直接以字符串的形式进行样式引用
在这里插入图片描述
样式生效
在这里插入图片描述
但是此时会被报错，也就是要改为className标记样式
在这里插入图片描述
改为className就没有报错了
在这里插入图片描述
在这里插入图片描述

内联样式

所谓内联样式就是在标签上面直接标出css、
例子： <span className = "sss" style = {{fontSize:'50px'; color:'origin'}}>

React中如果使用内联样式，则需要去用{{样式属性}}标记，注意是两层花括号

  • 外层花括号代表在JSX中引用JS
  • 内层花括号代表一个JS对象（对象里描述了样式）

则语法为：style={{key1:'value1' , key2:'value2'}}
在这里插入图片描述
在这里插入图片描述

只有一个根标签

这个不用多赘述，定义的那个虚拟DOM只保持一个根标签，图上多个就报错了
在这里插入图片描述

标签必须闭合

无论是单个或者多个标签，JSX中必须保持闭合
单个标签不闭合报错
在这里插入图片描述
闭合了即正确（2选1均可）
单标签闭合
在这里插入图片描述
双标签闭合
在这里插入图片描述

标签首字母

小写字母开头

就将标签转化为html同名元素，如果html中无该标签对应的元素，就报错；
随便定义一个标签

在这里插入图片描述
在这里插入图片描述

大写字母开头

react就去渲染对应的组件，如果没有就报错
在这里插入图片描述
直接认为是React标签，在React组件中找不到定义，则直接报错
在这里插入图片描述

JSX小练习

JS表达式和JS语句的区别

关于JS表达式和JS语句分别是什么：

JS表达式：返回一个值，可以放在任何一个需要值的地方 a a+b demo(a) arr.map() function text(){}

JS语句：if(){} for(){} while(){} swith(){} 不会返回一个值

这二者如何区分呢？
就是用 一个变量去接这个代码，看看有没有返回值

  • 有返回值的就是JS表达式
  • 没有返回值的就是语句（条件判断语句， 转向语句，循环执行语句…）

为什么要说这个？
是因为，标签中混入JS表达式的时候要用{}
换句话说：
就是，{}中只能放入JS表达式

举例

放入JS表达式，可能有返回值，可以放入
在这里插入图片描述

放入JS语句，没有返回值，报错
在这里插入图片描述

用JSX循环显示数组

在这里插入图片描述
渲染出来的效果
在这里插入图片描述
但是控制台会有报错
意思这种循环出来的标签，需要有自己的unique key，因为diffing算法需要用这个key，所以这里报错
在这里插入图片描述

稍加修改，用遍历时自动生成的index作为unique key，但是这种做法会有问题，但是这里先不用处理，后续学习中会说明
在这里插入图片描述

在这里插入图片描述

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

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

相关文章

2024 王道考研-数据结构

2024 王道考研-数据结构

第二章 线性表算法题(线性表的顺序表示) 二、综合应用题 01.从顺序表中删除具有最小值的元素(假设唯一)并由函数返回被删元素的值。空出的位 置由最后一个元素填补&#xff0c;若顺序表为空&#xff0c;则显示出错信息并退出运行。 算法思想&#xff1a;搜索整个顺序表&#xf…
阅读更多...
Python之PyMySQL操作详解

Python之PyMySQL操作详解

一、PyMysql简介 PyMySQL 是在 Python3.x 版本中用于连接 MySQL 服务器的一个库&#xff0c;Python2中则使用mysqldb。 Django中也可以使用PyMySQL连接MySQL数据库。 二、PyMySQL操作详解 2.1 PyMySQL安装 pip install pymysql2.2 PyMySQL应用 2.2.1 基本使用 # codingut…
阅读更多...
【Leetcode】 213. 打家劫舍 II ?

【Leetcode】 213. 打家劫舍 II ?

你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋&#xff0c;每间房内都藏有一定的现金。这个地方所有的房屋都围成一圈&#xff0c;这意味着第一个房屋和最后一个房屋是紧挨着的。同时&#xff0c;相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚…
阅读更多...
sql server2014如何添加多个实例 | 以及如何删除多个实例中的单个实例

sql server2014如何添加多个实例 | 以及如何删除多个实例中的单个实例

标题sql server2014如何添加多个实例 前提&#xff08;已安装sql server2014 且已有默认实例MSSQLSERVER&#xff09; 添加新的实例 其实就是根据安装步骤再安装一次&#xff08;区别在过程中说明&#xff09; 双击安装 选择“全新独立安装或添加现有功能” 然后下一步下一…
阅读更多...
Apache Shiro 1.2.4反序列化漏洞（CVE-2016-4437）

Apache Shiro 1.2.4反序列化漏洞（CVE-2016-4437）

介绍 Apache Shiro是一款开源安全框架&#xff0c;提供身份验证、授权、密码学和会话管理。Shiro框架直观、易用&#xff0c;同时也能提供健壮的安全性。 版本 Apache Shiro 1.2.4及以前版本中 原理 不安全的配置 默认账户在里面 Apache Shiro 1.2.4及以前版本中&#x…
阅读更多...
C++学习之强制类型转换

C++学习之强制类型转换

强制类型转换运算符 带着三个疑问阅读&#xff1a; 出现的背景是什么&#xff1f;何时使用&#xff1f;如何使用&#xff1f; MSDN . 强制转换运算符 C中的四种强制类型转换符详解 static_cast (1) 使用场景 在基本数据类型之间转换&#xff0c;如把 int 转换为 char&#…
阅读更多...
pkg-config使用

pkg-config使用

作用&#xff1a;pkg-config是linux中的应用程序&#xff0c;可以方便导入第三方模块的头文件和库文件。很多模块是支持pkg-config的&#xff0c;这些模块&#xff08;如dpdk&#xff09;在编译安装后会生成**.pc**后缀的文件&#xff0c;pkg-config通过pc文件可以知道模块的头…
阅读更多...
Python 数组和列表：创建、访问、添加和删除数组元素

Python 数组和列表：创建、访问、添加和删除数组元素

Python 没有内置支持数组&#xff0c;但可以使用 Python 列表来代替。 数组 本页将向您展示如何使用列表作为数组&#xff0c;但要在 Python 中使用数组&#xff0c;您需要导入一个库&#xff0c;比如 NumPy 库。数组用于在一个变量中存储多个值&#xff1a; 示例&#xff0…
阅读更多...
动态内存分配（基础精讲课件）

动态内存分配（基础精讲课件）

阅读更多...
大数据学习(17)-mapreduce task详解

大数据学习(17)-mapreduce task详解

&&大数据学习&& &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 承认自己的无知&#xff0c;乃是开启智慧的大门 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4dd;支持一下博主哦&#x1f91…
阅读更多...
重生奇迹mu宠物带来不一样的体验

重生奇迹mu宠物带来不一样的体验

重生奇迹mu宠物有什么作用&#xff1f; 全新版本中更是推出了各种宠物&#xff0c;在玩游戏时还可以带着宠物&#xff0c;一起疯狂的刷怪等等&#xff0c;可以为玩家带来非常不错的游戏体验&#xff0c;那么下面就来给大家说说各种宠物适合做什么事情。 1、强化恶魔适合刷怪 …
阅读更多...
java头歌-java中的异常

java头歌-java中的异常

文章目录 第一关第二关第三关第四关 第一关 第二关 题目要求&#xff1a; public static void main(String[] args) {Scanner sc new Scanner(System.in);try {int num1 sc.nextInt();int num2 sc.nextInt();/********* Begin *********/System.out.println(num1/num2);}…
阅读更多...
【SA8295P 源码分析 (四)】21 - Android GVM 虚拟网络 vlan 配置

【SA8295P 源码分析 (四)】21 - Android GVM 虚拟网络 vlan 配置

【SA8295P 源码分析】21 - Android GVM 虚拟网络 vlan 配置 一、Android GVM 虚拟网络 vlan 配置二、网络验证三、网桥配置：让 Android GVM 可以通过 emac 访问外网四、兼容前后排车机：使用 QNX 环境变量进行区分五、动态修改 mac 地址六、VLAN原理系列文章汇总见：《【SA829…
阅读更多...
Redis | 在Java中操作Redis

Redis | 在Java中操作Redis

在Java中操作Redis&#xff1a; 第一步: pom.xml文件中导入maven依赖第二步: 在application.yml配置文件中 配置Redis数据源第三步: 编写RedisConfiguration配置类&#xff0c;创建RedisTemplate对象第四步: 通过RedisTemplate对象操作Redis / Redis中的数据4.1 操作“字符串St…
阅读更多...
CNN——卷积神经网络

CNN——卷积神经网络

文章目录 多层感知机&#xff08;MLP&#xff0c;Multilayer Perceptron&#xff09;神经网络定义MLP与神经网络的异同相同之处&#xff1a;不同之处&#xff1a;总结 为什么要使用神经网络CNN卷积层&#xff1a;池化层&#xff1a;全连接层&#xff1a; 卷积神经网络的优势pad…
阅读更多...
Python---while循环的执行流程 解释

Python---while循环的执行流程 解释

使用Debug调试工具&#xff0c;查看while循环的运行流程 代码 # ① 初始化计数器 i 1 # ② 编写循环条件&#xff08;判断计数器是否达到了100&#xff09; while i < 100:print(f{i 1}、老婆大人&#xff0c;我错了)# ③ 在循环体内部更新计数器i 1 ① 代码都是顺序执行…
阅读更多...
基于LSTM的天气预测 - 时间序列预测 计算机竞赛

基于LSTM的天气预测 - 时间序列预测 计算机竞赛

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 机器学习大数据分析项目 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng-senior/po…
阅读更多...
如何为 Elasticsearch 创建自定义连接器

如何为 Elasticsearch 创建自定义连接器

了解如何为 Elasticsearch 创建自定义连接器以简化数据摄取过程。 作者&#xff1a;JEDR BLASZYK Elasticsearch 拥有一个摄取工具库&#xff0c;可以从多个来源获取数据。 但是&#xff0c;有时你的数据源可能与 Elastic 现有的提取工具不兼容。 在这种情况下&#xff0c;你可…
阅读更多...
【深蓝学院】手写VIO第7章--VINS初始化和VIO系统--作业

【深蓝学院】手写VIO第7章--VINS初始化和VIO系统--作业

0. 内容 1. T1 1. 下载EuRoc数据集&#xff08;optional&#xff09; 因为作业主要使用Ch2生成的数据&#xff0c;所以这一步也是可选的&#xff0c;但是为了整个系统的bring up&#xff0c;可以先用EuRoc数据集跑起来。 下载EuRoc数据集&#xff0c;SLAM相关数据集链接 2.…
阅读更多...
【LeetCode刷题（数据结构与算法）】：数据结构中的常用排序实现数组的升序排列

【LeetCode刷题（数据结构与算法）】：数据结构中的常用排序实现数组的升序排列

现在我先将各大排序的动图和思路以及代码呈现给大家 插入排序 直接插入排序是一种简单的插入排序法&#xff0c;其基本思想是&#xff1a; 把待排序的记录按其关键码值的大小逐个插入到一个已经排好序的有序序列中&#xff0c;直到所有的记录插入完为 止&#xff0c;得到一个…
阅读更多...
最新文章

Copyright @ 2022~2023