react笔记 | 豆包MarsCode AI刷题

31 阅读2分钟

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中显示