React

一 React简介

1.1 React

1.1.1 什么是React

用于构建用户界面的JavaScript库

将数据 渲染为HTML视图的开源JavaScript库

由Facebook开源,2012年部署于Instagram,2013年5月宣布开源

1.1.2 为什么学React

  • 原生的JavaScript操作dom繁琐,效率低(DOM+API操作UI)
  • 使用JavaScript直接操作DOM,浏览器会大量的重绘重排
  • 原生JavaScript没有组件化编码方案,代码复用率低

1.1.3 React的特点

  • 采用组件化 模式,声明式编码,提高开发效率和组件复用率(声明式编码不同于命令式编码 eg:只需要眨眼,就知道该做什么,不用明确说明目的)
  • 在React Native中可以使用React语法进行移动端开发
  • 使用虚拟DOM技术,和优秀的Diffing算法,尽量减少与真实的DOM的交互
1.1.3.1 虚拟DOM与真实DOM

减少繁琐的操作,进行虚拟DOM的比较

虚拟DOM(Virtual DOM)和真实DOM(Real DOM)是前端开发中常用的两种DOM操作方式。

真实DOM是浏览器提供的实际的DOM对象,是页面上的实际元素。通过原生的DOM操作方法,我们可以直接操作真实DOM,例如创建、删除、修改元素等。由于真实DOM直接和浏览器交互,所以操作起来比较耗费性能。

虚拟DOM是在JavaScript中用对象模拟的一种DOM结构,它保存了真实DOM的层次结构和属性信息。虚拟DOM可以通过JavaScript的方式进行操作,不涉及浏览器的渲染过程,因此性能较高。

虚拟DOM的工作流程一般如下:

  • 使用JavaScript对象表示整个页面的DOM结构。
  • 利用虚拟DOM的diff算法,对比新旧虚拟DOM的差异,找出需要更新的部分。
  • 根据差异,生成最小化的DOM更新操作,然后直接操作真实DOM。

虚拟DOM比较适合复杂的应用场景,例如大量数据的展示、动态交互等。它可以在保证性能的同时,简化DOM操作的代码。但是实际的应用中,虚拟DOM也会带来一些额外的开销,因此在简单的应用中可能并不需要使用虚拟DOM。

相关推荐
卸任4 小时前
Vibe coding工具使用心得
前端·ai编程
brien95 小时前
为什么模型标称 1M,Google Antigravity 聊到 256K 却突然失忆?我们给它做了个原生行内监控圆环
前端
修炼的dance5 小时前
录屏关键帧间隔多少合适?六档实测,2秒到10秒小了75.6%
前端
Lank_M6 小时前
关键帧从1秒拉到10秒,录屏小87.3%,摄像头小10.8%
前端
补码缩写6 小时前
用 ffprobe 拆录屏,八成字节在 29 个关键帧上
前端
百思不得小李6 小时前
一个复杂的动态表单是如何实现的
前端·设计模式
陈随易6 小时前
Cmder 停更 17 个月,2.0 支持 Windows Terminal
前端·后端·程序员
风骏时光牛马6 小时前
前沿视界
前端
kyriewen6 小时前
我扫了 814 个依赖,97 个还敢要 Node 10
前端·javascript·程序员
陈随易6 小时前
3000 万人在用的翻译插件,重写一遍就是一门生意
前端·后端·程序员