React 是一个用于构建用户界面的JavaScript 库
UI指的是用户界面
React 拥有较高的性能,代码逻辑非常简单
React 是用于动态构建用户界面的JavaScript库(只关注于视图)
DOM是“文档对象模型”(Document Object Model)的缩写。它是一种用于表示和操作HTML或XML文档的编程接口,它将整个文档视为一个树形结构,每个节点代表文档中的一个部分(如元素、属性、文本等)。
React 高效的原因
1. 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
2. DOM Diffing算法, 最小化页面重绘。
传统的web应用,操作DOM一般是直接更新操作的,但是我们知道DOM更新通常是比较昂贵的。而React为了尽可能减少对DOM的操作,提供了一种不同的而又强大的方式来更新DOM,代替直接的DOM操作。就是VirtualDOM,一个轻量级的虚拟的DOM,就是React抽象出来的一个对象,描述dom应该什么样子的,应该如何呈现。通过这个Virtual DOM去更新真实的DOM,由这个Virtual DOM管理真实DOM的更新。
创建虚拟DOM的两种方式
纯JS方式(一般不用)
JSX方式
React提供了一些API来创建一种 “特别” 的一般js对象
· const VDOM = React.createElement('xx',{id:'xx'},'xx')
· 上面创建的就是一个简单的虚拟 DOM 对象
虚拟DOM对象最终都会被React转换为真实的DOM
我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。
XML(可扩展标记语言,eXtensible Markup Language)是一种用于描述数据的标记语言。它是一种文本格式,用于存储和传输结构化数据,具备高度的可扩展性和兼容性。XML的设计目标是使数据易于被人类和机器读取。
· JSX是React的核心组成部分,它使用XML标记的方式去直接声明界面,界面组件之间可以互相嵌套。可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构(DOM结构)的语法,它的目的不是要在浏览器或者引擎中实现,它的目的是通过各种编译器将这些标记编译成标准的JS语言。
渲染虚拟DOM(元素)
语法: ReactDOM.render(virtualDOM, containerDOM)
作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示