React学习手册

72

｜

第

4

章

在

React

中，我们将这些零部件称为组件。组件允许用户对不同菜谱或者数据集复用

同一

DOM

结构。

当考虑使用

React

构建一个用户界面时，可以在适当的时机将这些元素通用的部分提

取出来，封装成可复用的组件。比如，图

4-4

中的菜谱列表元素都包含一个标题，成

分列表和操作步骤。这些元素都是更大型菜谱或者应用组件的一部分。

我们可以为每个高亮部分创建一个组件：成分列表，操作步骤等。

图

4

-

4

：每个组件的大致轮廓：App应用，成分列表和操作步骤

读者可以思考一下如何对上述代码进行扩展。如果希望显示一个菜谱，我们的组件结

构可以满足需要。如果希望显示

10000

个菜谱，那么我们只需要创建该组件的若干实

例即可。

接下来将会介绍创建组件的三种不同方法：

createClass

、

ES6

的类和无状态函数式组

件。

React.createClass

2013

年，

React

诞生之初，创建组件的方法只有一种，即

createClass

函数。

虽然后来又引入了不少创建组件的新方法，不过

createClass

函数在

React

项目中仍然

非常流行。

React

研发团队已经表示，未来可能会弃用

createClass

函数。

接下来让我看看包含到每个菜谱中的食材成分列表。如示例

4-12

所示，我们可以使用

React.createClass

创建一个

React

组件，它返回的单个无序列表包含了一个和数组中

每种成分对应的子元素列表。

React

进阶

｜

73

示例

4-12

：

React

组件构造的食材成分列表

const IngredientsList ...