React ：一、简单概念
目录
1.什么是React？
2.谁开发的
3.为什么要学React？
4.React的特点？
5.React依赖包
6.第一个React程序
7.虚拟DOM的两种创建方法
8.虚拟DOM和真实DOM
1.什么是React？
用于构建用户界面的JavaScript库，是一个将数据渲染成HTML视图的开源JavaScript库。
以前处理一个页面：
1.发送请求获取数据，
2.处理数据（过滤、整理格式等）
3.操作DOM呈现页面
现在第三步交给React去做。
2.谁开发的
3.为什么要学React？
1.原生JavaScript操作DOM繁琐，效率低（DOM-API操作UI）。
2.使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排。
3.原生JavaScript没有组件化的编码方案，代码服用效率低。
4.React的特点？
1.采用组件化模式、声明式编码，提高开发效率及组件复用率。
声明式：就是直接说你要干什么，不用一步步命令对方起身，穿衣服，刷牙，而是直接让对方刷牙。
2.在React Native中可以使用React语法进行移动端开发。
3.使用虚拟DOM+优秀Diffing算法，尽量减少与真实DOM的交互。
原先是直接对真实DOM进行操作，现在是对应一个虚拟DOM，它存在内存里，当加一个数据时，原先是把全部的数据都加载一遍，现在虚拟DOM会进行比较，重复数据的就不会重新提交，只有新增的数据操作真实DOM。
5.React依赖包
React 是用jsx写的不是js
babel.main.js 的作用 ES6 ==> ES5 、jsx ==> js
react.devolopment.js ==> react核心库
react.dom.development.js ==>react操作DOM，react拓展库
6.第一个React程序
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><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><!-- 引入bable，用于将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>
7.虚拟DOM的两种创建方法
开发过程中使用jsx方式，jsx就是js在创建虚拟DOM时太繁琐，而出现的技术，但是浏览器识别不了babel，在浏览器运行时也是把jsx转换为js运行，只是方便了我们操作。
语法糖：就是一种技术的简化方式。
1.jsx的方式
2.js方式
8.虚拟DOM和真实DOM
<div id="demo"></div>：这就是一个真实DOM。
const TDOM = document.getElementById('demo');
TDOM 就是一个真实DOM
下如就是虚拟DOM，虚拟DOM就是一个object类型的对象。
虚拟DOM身上的属性很少，所以较轻，真实则很多重。
相关文章：
React ：一、简单概念
目录 1.什么是React？ 2.谁开发的 3.为什么要学React？ 4.React的特点？ 5.React依赖包 6.第一个React程序 7.虚拟DOM的两种创建方法 8.虚拟DOM和真实DOM 1.什么是React？ 用于构建用户界面的JavaScript库，是一个将…...
Actipro WinForms Studio Crack
Actipro WinForms Studio Crack 已验证Microsoft.NET 7兼容性。 添加了MetroDark配色方案。 添加了支持MetroLight和MetroDark颜色方案的MetroScrollBarRenderer。 添加了IWindowsColorScheme接口，该接口将替换对WindowsColorScheme的大多数引用。 添加了IWindowsCo…...
英伦四地到底是什么关系？
英格兰、苏格兰、威尔士和北爱尔兰四地到底是什么关系，为何苏格兰非要独立？故事还要从中世纪说起。大不列颠岛位于欧洲西部，和欧洲大陆隔海相望。在古代，大不列颠岛和爱尔兰属于凯尔特人的领地。凯尔特人是欧洲西部一个庞大的族群…...
Google三大论文之GFS
Google三大论文之GFS Google GFS（Google File System） 文件系统，一个面向大规模数据密集型应用的、可伸缩的分布式文件系统。GFS 虽然运行在廉价的普遍硬件设备上，但是它依然了提供灾难冗余的能力，为大量客户机提供了…...
嵌入式安防监控项目——exynos4412主框架搭建
目录 一、模块化编程思维 二、安防监控项目主框架搭建 一、模块化编程思维 其实我们以前学习32使用keil的时候就是再用模块化的思维。每个硬件都单独有一个实现功能的C文件和声明函数，进行宏定义以及引用需要使用头文件的h文件。 比如简单的加减乘除取余操作我们…...
YOLOv5s网络模型讲解(一看就会)
文章目录前言1、YOLOv5s-6.0组成2、YOLOv5s网络介绍2.1、参数解析2.2、YOLOv5s.yaml2.3、YOLOv5s网络结构图3、附件3.1、yolov5s.yaml 解析表3.2、 yolov5l.yaml 解析表总结前言 最近在重构YOLOv5代码，本章主要介绍YOLOv5s的网络结构 1、YOLOv5s-6.0组成 我们熟知YO…...
kkfileView linux 离线安装
文章目录前言一、安装 LiberOffice二、安装kkfileView1.下载安装包2.启动总结前言 一、安装 LiberOffice 下载https://kkfileview.keking.cn/LibreOffice_7.1.4_Linux_x86-64_rpm.tar.gz 安装 tar -zxvf LibreOffice_7.1.4_Linux_x86-64_rpm.tar.gz cd LibreOffice_7.1.4.2_L…...
如何编写BI项目之ETL文档
XXXXBI项目之ETL文档 xxx项目组 ------------------------------------------------1---------------------------------------------------------------------- 目录 一 、ETL之概述 1、ETL是数据仓库建构/应用中的核心…...
【LeetCode】剑指 Offer 24. 反转链表 p142 -- Java Version
题目链接：https://leetcode.cn/problems/fan-zhuan-lian-biao-lcof/submissions/ 1. 题目介绍（24. 反转链表） 定义一个函数，输入一个链表的头节点，反转该链表并输出反转后链表的头节点。 【测试用例】： 示…...
LAY-EXCEL导出excel并实现单元格合并
通过lay-excel插件实现Excel导出，并实现单元格合并，样式设置等功能。更详细描述，请去lay-excel插件文档查看，地址：http://excel.wj2015.com/_book/docs/%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B.html一、安装这里使用Vue…...
配置VM虚拟机Centos7网络
配置VM虚拟机Centos7网络 第一步，进入虚拟机设置选中【网络适配器】选择【NAT模式】 第二步，进入windows【控制面板\网络和 Internet\网络连接】设置网络状态。 我们选择【VMnet8】 点击【属性】查看它的网络配置 2 .我们找到【Internet 协议版本 4(TCP…...
Kafka 位移主题
Kafka 位移主题位移格式创建位移提交位移删除位移Kafka 的内部主题 (Internal Topic) : __consumer_offsets (位移主题，Offsets Topic) 老 Consumer 会将位移消息提交到 ZK 中保存 当 Consumer 重启后，能自动从 ZK 中读取位移数据，继续消费…...
详细讲解零拷贝机制的进化过程
一、传统拷贝方式（一）操作系统经过4次拷贝CPU 负责将数据从磁盘搬运到内核空间的 Page Cache 中；CPU 负责将数据从内核空间的 Page Cache 搬运到用户空间的缓冲区；CPU 负责将数据从用户空间的缓冲区搬运到内核空间的 Socket 缓冲区…...
2023年场外个股期权研究报告
第一章 概况 场外个股期权（Over-the-Counter Equity Option），是指由交易双方根据自己的需求和意愿，通过协商确定行权价格、行权日期等条款的股票期权。与交易所交易的标准化期权不同，场外个股期权的合同内容可以根据交…...
k8s pod,ns,pvc 强制删除
一、强制删除pod$ kubectl delete pod <your-pod-name> -n <name-space> --force --grace-period0解决方法：加参数 --force --grace-period0，grace-period表示过渡存活期，默认30s，在删除POD之前允许POD慢慢终止其上的…...
力扣第99场双周赛题目记录（复盘）
第一题 2578.最小和分割 给你一个正整数 num ，请你将它分割成两个非负整数 num1 和 num2 ，满足： num1 和 num2 直接连起来，得到 num 各数位的一个排列。 换句话说，num1 和 num2 中所有数字出现的次数之和等于 num 中所…...
spring事务失效原因
一.抛出事务不支持的异常 原理： Spring事务默认支持RuntimeException异常，抛出的异常为RuntimeException异常及其子类异常事务均可生效，而我们日常常见的异常基本都继承自RuntimeException，所以无需指定异常类型事务也能生效。 但…...
pikachu靶场CSRF之TOKEN绕过
简介 Pikachu靶场中的CSRF漏洞环节里面有一关CSRF TOKEN，这个关卡和其余关卡稍微有点不一样，因为表单里面存在一个刷新就会变化的token，那么这个token是否能绕过呢？接下来我们来仔细分析分析 实战过程 简单尝试 先利用任意一个…...
Windows中配置docker没有hyper-v功能解决方案
👨 作者简介：大家好，我是Taro，前端领域创作者 ✒️ 个人主页：唐璜Taro 🚀 支持我：点赞👍📝 评论 ⭐️收藏 文章目录前言解决步骤：1.新建文档2. 另存为3. 功能…...
电子台账：模板制作之五——二级过滤与多条件组合
1 前言工作中，经常会遇到很复杂的数据，比如内销产品和出口产品、正常产品和报废产品都混在一块儿。电子台账中，需要把这些数据都区分开，分别汇总。这种情况，可以用台账软件的二级过滤功能来处理，实际上就是…...
基于SpringBoot + Vue的新农村信息平台建设（角色：企业村民村委会管理员）
文章目录前言一、详细操作演示视频二、具体实现截图三、技术栈1.前端-Vue.js2.后端-SpringBoot3.数据库-MySQL4.系统架构-B/S四、系统测试1.系统测试概述2.系统功能测试3.系统测试结论五、项目代码参考六、数据库代码参考七、项目论文示例结语前言 💛博主介绍&#…...
生物信息学新手必看：BBmap比对工具从安装到实战全流程指南
生物信息学新手必看：BBmap比对工具从安装到实战全流程指南 第一次接触生物信息学数据分析时，面对海量的测序数据往往会感到无从下手。比对工具的选择尤为关键——既要保证准确性，又要兼顾效率。BBmap作为BBTools套件中的核心工具，…...
智能排障：借助快马AI构建Vivado安装问题自动诊断与修复助手
作为一名FPGA开发者，Vivado安装过程中的各种报错简直是家常便饭。每次遇到新问题都要花大量时间搜索解决方案，效率实在太低。最近尝试用InsCode(快马)平台的AI能力搭建了一个智能诊断工具，效果出乎意料的好，分享下具体实现思路。 …...
告别手动回复！用Python+uiautomation给微信PC版做个关键词自动回复机器人
用Python打造微信PC版智能应答机器人：从消息监控到自动化交互 每次打开微信都被海量消息淹没？客服咨询重复率高达70%？社群运营每天机械回复相同问题？这些场景背后隐藏着一个共同痛点——低效重复劳动正在吞噬现代人的生产力。今天…...
效率提升利器：用快马生成智能脚本，一键统一团队node.js开发环境
在团队协作开发中，最让人头疼的莫过于"在我电脑上能跑"的环境问题。最近我们团队尝试用InsCode(快马)平台生成智能脚本，彻底解决了Node.js环境配置这个老大难问题。分享下这个提升效率的实践过程： 环境检测自动化 传统方式需要每个…...
BERT文本分割-中文-通用领域开发者指南：源码路径/usr/local/bin/webui.py解析
BERT文本分割-中文-通用领域开发者指南：源码路径/usr/local/bin/webui.py解析 1. 项目简介 随着在线教学、远程会议等应用的普及，口语化文档的数量正在快速增长。这些文档通常以会议记录、讲座内容、采访稿等形式存在。但通过自动语音识别系统生成的文…...
5分钟精通网页内容转化：AnythingLLM浏览器扩展全攻略
5分钟精通网页内容转化：AnythingLLM浏览器扩展全攻略 【免费下载链接】anything-llm 这是一个全栈应用程序，可以将任何文档、资源（如网址链接、音频、视频）或内容片段转换为上下文，以便任何大语言模型（LLM&…...
AudioLDM-S实战教程：为有声书项目批量生成章节过渡音效（含脚本）
AudioLDM-S实战教程：为有声书项目批量生成章节过渡音效（含脚本） 1. 项目简介 AudioLDM-S是一个专门生成现实环境音效的AI工具，基于audioldm-s-full-v2模型的轻量级Gradio实现。无论你需要电影配音、游戏音效还是助眠白噪音&…...
Anno 1800模组加载器完全掌握指南：从安装到创意开发
Anno 1800模组加载器完全掌握指南：从安装到创意开发 【免费下载链接】anno1800-mod-loader The one and only mod loader for Anno 1800, supports loading of unpacked RDA files, XML merging and Python mods. 项目地址: https://gitcode.com/gh_mirrors/an/an…...
零基础部署Ostrakon-VL-8B：用Chainlit前端，轻松实现智能图片分析
零基础部署Ostrakon-VL-8B：用Chainlit前端，轻松实现智能图片分析 1. 为什么你需要Ostrakon-VL-8B？ 想象一下，你经营着一家连锁便利店，每天需要检查几十家门店的商品陈列、价格标签和卫生状况。传统方法是让店长拍照发…...