React学习手册

70

｜

第

4

章

这个示例演示了单纯使用

React

时的样子。

React

代码最终会在浏览器中运行。虚拟

DOM

是一个包含单个根元素的

React

元素树。

React

元素是一组操作指令，

React

将根

据该指令在浏览器中构建

UI

界面。

使用数据构造元素

使用

React

的主要优点是它可以将数据和

UI

元素有效隔离。因为

React

只包含

JavaScript

，我们可以添加

JavaScript

的业务逻辑来帮助我们构建

React

组件树。比如，

食材成分可以存储在一个数组中，然后我们可以将这个数组映射到

React

元素上。

接下来我们将会在示例

4-8

中重新回顾一下无序列表的应用。

示例

4-8

：无序列表

React.createElement("ul", {"className": "ingredients"},

React.createElement("li", null, "1 lb Salmon"),

React.createElement("li", null, "1 cup Pine Nuts"),

React.createElement("li", null, "2 cups Butter Lettuce"),

React.createElement("li", null, "1 Yellow Squash"),

React.createElement("li", null, "1/2 cup Olive Oil"),

React.createElement("li", ...