React学习手册

React

进阶

｜

65

效地更新它们要容易一些。

注

4

问题在于，我们可能并没有充足的时间或者丰富的

JavaScript

知识，在每次构建新应用时可以高效地使用

DOM API

。这个问题的解决方

案是

React

。

React

脚本库的设计初衷就是帮助用户更新浏览器的

DOM

。我们不再需要关心和构

建高性能单页应用相关的复杂性，因为这些都可以由

React

为用户代劳。采用

React

之

后，我们不需要直接和

DOM API

打交道。取而代之的是和一个虚拟

DOM

交互，或者

一组指令，让

React

构造

UI

或者和浏览器交互。

注

5

虚拟

DOM

是由

React

元素组成的，概念上和

HTML

元素类似，不过它们实际上是

JavaScript

对象。直接访问

JavaScript

对象要比访问

DOM API

高效的多。我们可以修改

JavaScript

对象，即虚拟

DOM

，然后

React

通过

DOM API

为用户尽可能高效地渲染这些

变更。

React

元素

浏览器的

DOM

是由

DOM

元素构成的。同样，

React

的

DOM

是由

React

元素构成的。

DOM

元素和

React

的元素看上去是一样的，不过实际上它们存在很大差别。一个

React

元素是对实际

DOM

元素应该如何表示的具体描述。换句话说，

React

元素表示应该如

何创建浏览器

DOM

的一组指令。

我们使用

React.createElement

创建一个

React

元素来表示

h1

标题元素：

React.createElement("h1", null, "Baked Salmon")

第

1

个参数定义了我们希望创建的元素类型。在这种情况下，我们创建了一个 ...