React 全栈体系（一）

第一章 React入门

一、React简介

1. 是什么？

  • 是一个将数据渲染为HTML视图的开源JavaScript库。

2. 谁开发的？

  • 由Facebook开源

3. 为什么要学？

  • 原生JavaScript操作DOM繁琐，效率低（DOM-API 操作 UI）

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

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

4. React的特点

  • 采用组件化模式，声明式编码，提高开发效率及组件复用率
  • 在React Native中可以使用React语法进行移动端开发
  • 使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互

请添加图片描述
请添加图片描述
请添加图片描述

5. React高效的原因

  • 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
  • DOM Diffing算法, 最小化页面重绘。

二、React的基本使用

1. 效果

请添加图片描述

2. 相关js库

  • react.js：React核心库。
  • react-dom.js：提供操作DOM的react扩展库。
  • babel.min.js：解析JSX语法代码转为JS代码的库。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>hello_react</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel" > /* 此处一定要写babel *///1.创建虚拟DOMconst VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 *///2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))</script>
</body>
</html>

3. 创建虚拟DOM的两种方式

请添加图片描述

  • 纯JS方式(一般不用)
  • JSX方式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>1_使用jsx创建虚拟DOM</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel" > /* 此处一定要写babel *///1.创建虚拟DOMconst VDOM = (  /* 此处一定不要写引号，因为不是字符串 */<h1 id="title"><span>Hello,React</span></h1>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>2_使用js创建虚拟DOM</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" > //1.创建虚拟DOMconst VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))</script>
</body>
</html>

4. 虚拟DOM与真实DOM

4.1 React提供了一些API来创建一种 “特别” 的一般js对象

  • const VDOM = React.createElement(‘xx’,{id:‘xx’},‘xx’)
  • 上面创建的就是一个简单的虚拟DOM对象

4.2 虚拟DOM对象最终都会被React转换为真实的DOM

4.3 我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>3_虚拟DOM与真实DOM</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><div id="demo"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel" > /* 此处一定要写babel *///1.创建虚拟DOMconst VDOM = (  /* 此处一定不要写引号，因为不是字符串 */<h1 id="title"><span>Hello,React</span></h1>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))const TDOM = document.getElementById('demo')console.log('虚拟DOM',VDOM);console.log('真实DOM',TDOM);debugger;// console.log(typeof VDOM);// console.log(VDOM instanceof Object);/* 关于虚拟DOM：1.本质是Object类型的对象（一般对象）2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。*/</script>
</body>
</html>

三、React JSX

1. 效果

在这里插入图片描述

2. JSX

  • 全称: JavaScript XML
  • react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, …children)方法的语法糖
  • 作用: 用来简化创建虚拟DOM
    • 写法：var ele = <h1>Hello JSX!</h1>
    • 注意1：它不是字符串, 也不是HTML/XML标签
    • 注意2：它最终产生的就是一个JS对象
  • 标签名任意: HTML标签或其它标签
  • 标签属性任意: HTML标签属性或其它
  • 基本语法规则
    • 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
    • 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
  • babel.js的作用
    • 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
    • 只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jsx语法规则</title><style>.title{background-color: orange;width: 200px;}</style>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel" >const myId = 'aLeX'const myData = 'HeLlo,rEaCt'//1.创建虚拟DOMconst VDOM = (<div><h2 className="title" id={myId.toLowerCase()}><span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span></h2><h2 className="title" id={myId.toUpperCase()}><span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span></h2><input type="text"/></div>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))/* jsx语法规则：1.定义虚拟DOM时，不要写引号。2.标签中混入JS表达式时要用{}。3.样式的类名指定不要用class，要用className。4.内联样式，要用style={{key:value}}的形式去写。5.只有一个根标签6.标签必须闭合7.标签首字母(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。*/</script>
</body>
</html>

请添加图片描述

3. 渲染虚拟DOM(元素)

  • 语法: ReactDOM.render(virtualDOM, containerDOM)
  • 作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
  • 参数说明
    • 参数一: 纯js或jsx创建的虚拟dom对象
    • 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

4. JSX练习

  • 需求: 动态展示如下列表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jsx小练习</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel" >/* 一定注意区分：【js语句(代码)】与【js表达式】1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方下面这些都是表达式：(1). a(2). a+b(3). demo(1)(4). arr.map() (5). function test () {}2.语句(代码)：下面这些都是语句(代码)：(1).if(){}(2).for(){}(3).switch(){case:xxxx}*///模拟一些数据const data = ['Angular','React','Vue']//1.创建虚拟DOMconst VDOM = (<div><h1>前端js框架列表</h1><ul>{data.map((item,index)=>{return <li key={index}>{item}</li>})}</ul></div>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))</script>
</body>
</html>

请添加图片描述

四、模块与组件、模块化与组件化的理解

1.模块

  • 理解：向外提供特定功能的js程序, 一般就是一个js文件
  • 为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂
  • 作用：复用js, 简化js的编写, 提高js运行效率

2. 组件

  • 理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
  • 为什么要用组件： 一个界面的功能更复杂
  • 作用：复用编码, 简化项目编码, 提高运行效率

3. 模块化

当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

4. 组件化

当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

请添加图片描述

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

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

相关文章

【CNN-BiLSTM-attention】基于高斯混合模型聚类的风电场短期功率预测方法（Pythonmatlab代码实现）

【CNN-BiLSTM-attention】基于高斯混合模型聚类的风电场短期功率预测方法（Pythonmatlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
“解锁IDEA的潜力：高级Java Maven项目配置指南”

“解锁IDEA的潜力：高级Java Maven项目配置指南”

目录 前言&#xff1a;流程目录&#xff1a;1.确保Java和Maven已安装检查Java是否已正确安装并配置环境变量 2.创建一个新的Maven项目导航到要创建项目的目录配置Maven运行以下命令创建一个新的Maven项目 3.配置项目的pom.xml文件打开项目根目录下的pom.xml文件配置Web.xml 4.配…
阅读更多...
优维低代码实践：自定义模板

优维低代码实践：自定义模板

优维低代码技术专栏&#xff0c;是一个全新的、技术为主的专栏&#xff0c;由优维技术委员会成员执笔&#xff0c;基于优维7年低代码技术研发及运维成果&#xff0c;主要介绍低代码相关的技术原理及架构逻辑&#xff0c;目的是给广大运维人提供一个技术交流与学习的平台。 优维…
阅读更多...
SharePoint 审核和监控工具

SharePoint 审核和监控工具

审核在顺利的 SharePoint 管理中起着重要作用&#xff0c;尤其是在满足法规遵从性和取证要求方面。为避免数据泄露&#xff0c;必须了解谁来自哪个组访问了哪个文档&#xff0c;以及谁创建或删除了网站或网站集。 审核 SharePoint 服务器 SharePoint采用率的提高导致企业在其…
阅读更多...
如何初始化Git仓库

如何初始化Git仓库

如何将目录初始化为Git仓库 一级目录二级目录三级目录 一、准备1、安装 gh2、登录 二、初始化 Git 仓库 一级目录 二级目录 三级目录 一、准备 ​ 在这里&#xff0c;我们需要借助一个非常好用的工具&#xff0c;大家也可以参照官方文档进行阅读&#xff0c;下面介绍常用的…
阅读更多...
IntelliJ IDEA和Android studio怎么去掉usage和作者提示

IntelliJ IDEA和Android studio怎么去掉usage和作者提示

截止到目前我已经写了 600多道算法题&#xff0c;其中部分已经整理成了pdf文档&#xff0c;目前总共有1000多页&#xff08;并且还会不断的增加&#xff09;&#xff0c;大家可以免费下载 下载链接&#xff1a;https://pan.baidu.com/s/1hjwK0ZeRxYGB8lIkbKuQgQ 提取码&#xf…
阅读更多...
C#实现邮箱验证码

C#实现邮箱验证码

开发环境&#xff1a;C#&#xff0c;VS2019&#xff0c;.NET Core 3.1&#xff0c;ASP.NET Core Web API&#xff0c;163邮箱 1、在163邮箱的设置中开通IMAP/SMTP的服务&#xff0c;授权成功后会弹出一个窗体&#xff08;如下图所示&#xff09;&#xff0c;上面显示了授权密码…
阅读更多...
Java并发编程（七）实践[生产者-消费者]

Java并发编程（七）实践[生产者-消费者]

生产者-消费者 概述 生产者消费者问题&#xff0c;也称有限缓冲问题&#xff0c;是一个多线程同步问题的经典案例。该问题描述了共享固定大小缓冲区的两个线程在多线程开发中,如果生产者(生产数据的线程)处理速度很快,而消费者(消费数据的线程)处理速度很慢,那么生产者就必须…
阅读更多...
docsify gitee 搭建个人博客

docsify gitee 搭建个人博客

docsify & gitee 搭建个人博客 文章目录 docsify & gitee 搭建个人博客1.npm 安装1.1 在Windows上安装npm&#xff1a;1.2 在macOS上安装npm&#xff1a;1.3 linux 安装npm 2. docsify2.1 安装docsify2.2 自定义配置2.2.1 通过修改index.html&#xff0c;定制化开发页面…
阅读更多...
【讯飞星火认知大模型】大模型之星火手机助理

【讯飞星火认知大模型】大模型之星火手机助理

目录 1. 讯飞星火认知大模型介绍 2. API 申请 3. 星火手机助理 4. 效果展示 1. 讯飞星火认知大模型介绍 讯飞星火认知大模型是科大讯飞自研的基于深度学习的自然语言处理模型&#xff0c;它可以理解和生成中文&#xff0c;执行多种任务&#xff0c;如问答、翻译、写作、编…
阅读更多...
uniapp的逆地理编码 和地理编码

uniapp的逆地理编码 和地理编码

1.先打开高德地图api找到那个 地理编码 2.封装好我们的请求 3.逆地理编码 和地理编码 都是固定的 记住自己封装的请求 就可以了 这个 是固定的 方式 下面这个是固定的 可以复制过去 getlocation就是uniapp提供的 获取经纬度 然后 下面的 就是高德地图提供的 方法 要想使用我…
阅读更多...
arcgis数据采集与拓扑检查

arcgis数据采集与拓扑检查

1、已准备好一张配准好的浙江省行政区划图&#xff0c;如下&#xff1a; 2、现在需要绘制湖州市县级行政区划。需要右击文件夹新建文件地理数据库&#xff0c;如下&#xff1a; 其余步骤均默认即可。 创建好县级要素数据集后&#xff0c;再新建要素类&#xff0c;命名为县。 为…
阅读更多...
什么是Selenium？使用Selenium进行自动化测试

什么是Selenium？使用Selenium进行自动化测试

什么是 Selenium&#xff1f;   Selenium 是一种开源工具&#xff0c;用于在 Web 浏览器上执行自动化测试&#xff08;使用任何 Web 浏览器进行 Web 应用程序测试&#xff09;。   等等&#xff0c;先别激动&#xff0c;让我再次重申一下&#xff0c;Selenium 仅可以测试We…
阅读更多...
无涯教程-Perl - sethostent函数

无涯教程-Perl - sethostent函数

描述 该函数应在首次调用gethostent之前调用。 STAYOPEN参数是可选的,在大多数系统上未使用。 当gethostent()检索主机数据库中下一行的信息时,然后sethostent设置(或重置)枚举到主机条目集的开头。 语法 以下是此函数的简单语法- sethostent STAYOPEN返回值 此函数不返回…
阅读更多...
分类预测 | MATLAB实现BO-BiGRU贝叶斯优化双向门控循环单元多输入分类预测

分类预测 | MATLAB实现BO-BiGRU贝叶斯优化双向门控循环单元多输入分类预测

分类预测 | MATLAB实现BO-BiGRU贝叶斯优化双向门控循环单元多输入分类预测 目录 分类预测 | MATLAB实现BO-BiGRU贝叶斯优化双向门控循环单元多输入分类预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.Matlab实现BO-BiGRU贝叶斯优化双向门控循环单元多特征分…
阅读更多...
Nodejs+vue+elementui汽车租赁管理系统_1ma2x

Nodejs+vue+elementui汽车租赁管理系统_1ma2x

语言 node.js 框架&#xff1a;Express 前端:Vue.js 数据库&#xff1a;mysql 数据库工具&#xff1a;Navicat 开发软件&#xff1a;VScode 前端nodejsvueelementui, 课题主要分为三大模块&#xff1a;即管理员模块、用户模块和普通管理员模块&#xff0c;主要功能包括&#…
阅读更多...
小程序制作教程：从零开始搭建企业小程序

小程序制作教程：从零开始搭建企业小程序

在如今的数字化时代&#xff0c;企业介绍小程序成为了企业展示与推广的重要工具。通过企业介绍小程序&#xff0c;企业可以向用户展示自己的品牌形象、产品服务以及企业文化等内容&#xff0c;进而提高用户对企业的认知度和信任度。本文将介绍如何从零开始搭建一个企业介绍小程…
阅读更多...
《Java极简设计模式》第03章：工厂方法模式(FactoryMethod)

《Java极简设计模式》第03章：工厂方法模式(FactoryMethod)

作者&#xff1a;冰河 星球&#xff1a;http://m6z.cn/6aeFbs 博客&#xff1a;https://binghe.gitcode.host 文章汇总&#xff1a;https://binghe.gitcode.host/md/all/all.html 源码地址&#xff1a;https://github.com/binghe001/java-simple-design-patterns/tree/master/j…
阅读更多...
突破网络编程1024限制的方法(修改配置文件)

突破网络编程1024限制的方法(修改配置文件)

文章目录 概述修改linux配置相关命令步骤1. 打开终端2. 使用sudo权限编辑文件3. 添加资源限制配置4. 保存和退出5. 重启系统或重新登录 其他方法1. 使用事件驱动的框架2. 使用连接池3. 负载均衡4. 使用线程池和进程池5. 升级操作系统设置6. 使用专业的高性能服务器7. 分布式架构…
阅读更多...
PHP最简单自定义自己的框架控制器自动加载运行（四）

PHP最简单自定义自己的框架控制器自动加载运行（四）

1、实现效果调用控制中方法 2、创建控制器indexCrl.php <?php class indexCrl{public function index(){echo 当前index控制器index方法;} } 3、KJ.php字段加载控制器文件 public static function run(){//定义常量self::_set_const();//创建模块目录self::_mk_module();…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023