React入门学习

news/2024/11/15 1:44:07/

参考资料：https://bright-boy.gitee.io/technical-notes/#/react/React%E5%85%A5%E9%97%A8
https://github.com/xzlaptt/React
react学习01: https://docs.qq.com/doc/DSG1jdUJtQ3FYR1V1
react学习02: https://docs.qq.com/doc/DSGhGZk9PUm1KVldv

React简介

框架定义

在这里插入图片描述

开发者

在这里插入图片描述

为什么学

在这里插入图片描述

react特点

在这里插入图片描述
JS只是模块化编码，页面整体资源的组件化JS不能完成。声明式编码。

对于第3点，下面举例
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
React优势是不会丢弃之前渲染的DOM，比如现在有100个DOM，后面新增1个DOM，其实只有1个DOM发生变化。

学习React之前需要掌握的技能

在这里插入图片描述

相关介绍：

官网
1.英文官网: https://reactjs.org/
2.中文官网: https://react.docschina.org/
介绍描述
1.用于动态构建用户界面的 JavaScript 库(只关注于视图)
2.由Facebook开源
React的特点
1.声明式编码
2.组件化编码
3.React Native 编写原生应用
4.高效（优秀的Diffing算法）
React高效的原因
1.React高效的原因
2.2.DOM Diffing算法, 最小化页面重绘。

React基本使用

HelloReact

效果

在这里插入图片描述

相关js库
1.react.js：React核心库。
2.react-dom.js：提供操作DOM的react扩展库
3.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--><script type="text/javascript" src="../js/react-dom.development.js"></script><!--引入babel，用于解析jsx语法为原生js语法--><script type="text/javascript" src="../js/babel.min.js"></script><!-- babel将jsx代码翻译为js代码 --><script type="text/babel">// 1.创建一个虚拟DOMlet vDOM = <h2>hello,react</h2> // jsx语法不需要加引号，此处一定不要写引号，因为不是字符串// console.log(vDOM,typeof vDOM)let vDOM2 = <h2>hello,react2</h2> // 2.渲染虚拟DOM到页面，两个参数（虚拟DOM,容器）ReactDOM.render(vDOM, document.getElementById('test'))// 下面的会覆盖上面的效果，因为是不是追加的操作//ReactDOM.render(vDOM2, document.getElementById('test'))</script>
</body></html>

创建虚拟DOM的两种方式

在这里插入图片描述
1.纯JS方式(一般不用)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>使用js创建虚拟DOM</title>
</head><body><!--准备好一个容器--><div id="test"></div><!--react的核心库--><script type="text/javascript" src="../js/react.development.js"></script><!--react的扩展库，专门用于操作DOM--><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- babel将jsx代码翻译为js代码 --><script type="text/javascript">// 1.创建一个虚拟DOM,创建真实DOM用document.createElementconst vDOM = React.createElement('h1', {id:'title'}, React.createElement('span', '', 'hello,react'))// 2.渲染虚拟DOM到页面，两个参数（虚拟DOM,容器）ReactDOM.render(vDOM, document.getElementById('test'))</script>
</body></html>

2.JSX方式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>使用jsx创建虚拟DOM</title>
</head><body><!--准备好一个容器--><div id="test"></div><!--react的核心库--><script type="text/javascript" src="../js/react.development.js"></script><!--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><!-- babel将jsx代码翻译为js代码 --><script type="text/babel">// 1.创建一个虚拟DOMlet vDOM = (<h2 id="title"><span>hello,react</span></h2>) // jsx语法不需要加引号，此处一定不要写引号，因为不是字符串// 2.渲染虚拟DOM到页面，两个参数（虚拟DOM,容器）ReactDOM.render(vDOM, document.getElementById('test'))</script>
</body></html>

虚拟DOM与真实DOM

1.React提供了一些API来创建一种 “特别” 的一般js对象
const VDOM = React.createElement(‘xx’,{id:‘xx’},‘xx’)
上面创建的就是一个简单的虚拟DOM对象
虚拟DOM对象最终都会被React转换为真实的DOM
3.我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>使用jsx创建虚拟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--><script type="text/javascript" src="../js/react-dom.development.js"></script><!--引入babel，用于解析jsx语法为原生js语法--><script type="text/javascript" src="../js/babel.min.js"></script><!-- babel将jsx代码翻译为js代码 --><script type="text/babel">// 1.创建一个虚拟DOMlet vDOM = (<h2 id="title"><span>hello,react</span></h2>) // jsx语法不需要加引号，此处一定不要写引号，因为不是字符串// 2.渲染虚拟DOM到页面，两个参数（虚拟DOM,容器）ReactDOM.render(vDOM, document.getElementById('test'))const TDOM = document.getElmentById('demo')// 实际上就是Object对象console.log('虚拟DOM', vDOM)console.log('真实DOM', TDOM)console.log(typeof vDOM)/*** 关于虚拟DOM* 1.本质是Object类型的对象（一般对象）* 2.虚拟DOM比较轻，真实DOM比较重，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性* 3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上* **/</script>
</body></html>

React JSX

简介

效果

在这里插入图片描述

JSX

1.全称: JavaScript XML
2.react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, …children)方法的语法糖
3.作用: 用来简化创建虚拟DOM
1)写法：var ele =
Hello JSX!
2)注意1：它不是字符串, 也不是HTML/XML标签
3)注意2：它最终产生的就是一个JS对象

4.标签名任意: HTML标签或其它标签
5.标签属性任意: HTML标签属性或其它
6.基本语法规则

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

7.babel.js的作用

1)浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
2)只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

渲染虚拟DOM(元素)

1.语法: ReactDOM.render(virtualDOM, containerDOM)
2.作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
3.参数说明

1)参数一: 纯js或jsx创建的虚拟dom对象
2)参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

JSX语法规则

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>使用jsx创建虚拟DOM</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--><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 = 'aTguIGu'const myData = 'Hello, rEacT'// 1.创建一个虚拟DOMconst VDOM = (<div><h2 className = "title" id ={myId.toLowerCase()}><span style ={{color:'white'}}>{myData.toLowerCase()}</span>    </h2><h2 className = "title" id ={myId.toUpperCase()}><span style ={{color:'white'}}>{myData.toLowerCase()}</span>    </h2><input type="text"/><good>123</good></div>)// 2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById('test'))/*** jsx语法规则：*          1.定义虚拟DOM时，不需要引号*          2.标签中混入JS表达式时要用{},注意，这里不是指js代码*          3.样式的类名指定不要用class，要用className*          4.内联样式，要用style={{key:value}}的形式去写*          5.虚拟DO吗必须只有一个根标签*          6.标签必须闭合*          7.标签首字母*              （1）若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错*              （2）若大写字母开头，react就去渲染对应的组建，若组件没有定义，则报错* **/</script>
</body></html>

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--><script type="text/javascript" src="../js/react-dom.development.js"></script><!--引入babel，用于解析jsx语法为原生js语法--><script type="text/javascript" src="../js/babel.min.js"></script><!-- babel将jsx代码翻译为js代码 --><script type="text/babel">/*** 一定注意区分，【js语句（代码）】与【js表达式】*      1.表达式：一个表达式会产生一个值，可以放在任何一个需要的地方，可以使用let value接受*          下面这些都是表达式*              （1）.a*              （2）.a+b *              （3）.demo(1)*              （4）.arr.map()*               (5). function test(){}*       1.语句（代码）“*          下面这些都是表达式*              （1）.if(){}*              （2）.for(){}*              （3）.switch(){case:xxxx}* **/// 模拟一些数据const data = ['Angular', 'React', 'Vue']const data2 = [<li>Angular</li>,<li>React</li>,<li>Vue</li>]// 1.创建一个虚拟DOMlet vDOM = (<div><h1>前端js框架列表</h1><ul>{data.map((item)=>{// 必须要有keyreturn <li key ={item}>{item}</li>})}</ul></div>)// 2.渲染虚拟DOM到页面ReactDOM.render(vDOM, document.getElementById('test'))</script>
</body></html>

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

简介

效果

在这里插入图片描述

模块

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

组件

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

模块化

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

组件化

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

在这里插入图片描述


http://www.ppmy.cn/news/50409.html

相关文章

Spring Aop原理全面详解汇总

Spring Aop原理全面详解汇总

文章目录 近期想法什么是AOPSpringAOP与AspectjSpringAOP体系概述概念详解连接点- Jointpoint切入点- Pointcut通知- Advice切面- Aspect织入- Weaving 实现原理—动态代理JDK动态代理描述原理代码示例注意执行结果 优点缺点 CGLib动态代理描述原理代码示例注意执行结果 优点缺…
阅读更多...
未知接口调用方统计与实践

未知接口调用方统计与实践

一、相关背景 在上一篇关于API暴露等级的文章中&#xff0c;我们提到&#xff1a; 首先&#xff0c;很多时候服务的接口会在自身不知情的情况下被其他服务调用&#xff0c;这种情况其实比较常见。这是由于服务接口本身并没有注册到网关&#xff0c;同时也没有做非常详细的白名…
阅读更多...
Java版本电子招标采购系统源码:营造全面规范安全的电子招投标环境，促进招投标市场健康可持续发展

Java版本电子招标采购系统源码:营造全面规范安全的电子招投标环境，促进招投标市场健康可持续发展

营造全面规范安全的电子招投标环境&#xff0c;促进招投标市场健康可持续发展 传统采购模式面临的挑战 一、立项管理 1、招标立项申请 功能点&#xff1a;招标类项目立项申请入口&#xff0c;用户可以保存为草稿&#xff0c;提交。 2、非招标立项申请 功能点&#xff1a;非招标…
阅读更多...
VScode好用的设置（鼠标滚动缩进字体大小等等）

VScode好用的设置（鼠标滚动缩进字体大小等等）

首先我们打开VScode软件&#xff0c;找到左下角的设置 点击设置&#xff0c;找到setting.json&#xff0c;然后点进去 把下面的复制进去&#xff0c;如果想看&#xff0c;可以鼠标悬浮在上面点击看详情 { "workbench.startupEditor": "none", "files.…
阅读更多...
Cloudera的新变化：混合数据平台、端到端AI、实时数据处理

Cloudera的新变化：混合数据平台、端到端AI、实时数据处理

作者 | 宋慧 出品 | CSDN云计算 数据的价值和技术应用&#xff0c;获得了全行业的关注、认可和重视。 不过&#xff0c;数据赛道百家争鸣&#xff0c;数据系统的技术与行业方案众多&#xff0c;对于开发团队和用户来说&#xff0c;其实仍然需要耗费大量调研和分析的时间。 近日…
阅读更多...
网络安全与攻防-常见网络安全攻防

网络安全与攻防-常见网络安全攻防

目录 攻击手段&防御策略 阻断服务攻击&#xff08;DoS&#xff09; 地址解析欺骗&#xff08;ARP攻击&#xff09;&#xff08;Address Resolution Protocol spoofing&#xff09; 跨站脚本攻击&#xff08;XSS&#xff09; SQL注入 跨站请求伪造&#xff08;csrf&am…
阅读更多...
超低延时交换机助力金融证券极速交易场景应用

超低延时交换机助力金融证券极速交易场景应用

一、 极速交易技术的兴起 随着计算机技术和金融科技的快速发展&#xff0c;量化交易和高频交易在全球金融市场中已经被运用到各种交易场景&#xff0c;特别是在股票&#xff0c;期货&#xff0c;期权等衍生品市场&#xff0c;已经逐渐取代人工做市&#xff08;market maker)&am…
阅读更多...
事件捕获和事件冒泡有什么区别

事件捕获和事件冒泡有什么区别

事件捕获和事件冒泡有什么区别 事件冒泡事件捕获事件捕获和事件冒泡有什么区别stopPropagation()事件默认行为也会被阻止 是指什么在vue里Vue 中使用事件修饰符 事件冒泡&#xff08;event bubbling&#xff09;和事件捕获&#xff08;event capturing&#xff09;是指在浏览器…
阅读更多...
最新文章

Copyright @ 2022~2023