React高效的原因

1、使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。

2、DOM Diffing算法, 最小化页面重绘。

需要有序的引入相关js文件

202110151634270060145555-1653375134421

type=text/babel 使用jsx

实践

202110151634270080145863-1653375140539

202110151634270068141269-1653375143650

代码演示:

202110151634270125432406

注意：

有多个虚拟DOM不能采用这种方式：这种方式是覆盖不是追加

202110151634270153116149

代码演示：

202110151634270160950468

使用js创建虚拟DOM

202110151634270206207119

如果需要多层标签就需要内嵌React.createElement

使用jsx就会很方便：

202110151634270225148642