React学习手册

React

进阶

｜

77

除了稍微简洁的语法之外，

Facebook

暗示将来无状态函数式组件将会比

createClass

或者

ES6

的

class

语法效率更高。

DOM

渲染

因为我们可以通过属性参数将数据传递给组件，所以我们可以将用于创建

UI

的应用程

序数据和业务逻辑隔离。这使得用户获得了一组独立的数据集，它们比处理文档对象

模型更容易一些。当我们在这个独立数据集中做任何改动时，应用程序的

State

也随之

发生变化。

假定将应用程序中的所有数据都存放在单个

JavaScript

对象中。每次用户修改这个对

象后，可以将相关的变更数据作为参数传递给组件，继而对

UI

进行重绘。这意味着

ReactDOM.render

将会负担很大的工作量。

为了让

React

能够高效地运作，

ReactDOM.render

必须心灵手巧的工作。和清空或者重

构整个

DOM

相反，

ReactDOM.render

会保留当前的

DOM

，只对该

DOM

做最低限度的

修改。

假定我们有这样一个应用程序，使用微笑或者皱眉等表情来表示团队成员的心情。我

们可以在单个

JavaScript

数组中表示

5

个成员各自的心情。

["smile", "smile", "frown", "smile", "frown"];

使用这个数组构造的

UI

可能和下列内容类似：

如果有急事，团队成员必须一直工作到周末，我们可以通过修改数组中的数据来反映

团队成员的心情，最后的结果如下图所示：

["frown", "frown", "frown", "frown", "frown"];

我们必须修改第一个数组几个元素才能和第二个数组中全是皱眉的表情一致呢？ ...