React编程思想

作者：Pete Hunt

React是什么？在我看来，就是使用Javascript编写大型高性能网页应用的重要方法。在Facebook和Instagram（Facebook旗下的一款图片分享软件）上已经有所应用，且效果很好。

React出色的地方之一是它的编程思想，它指导你编写你的APP。在这篇文章中，我将带领你使用React编写出一个可以进行搜索的产品数据列表。

开始前的假设

想象我们已经有了一个JSON类型的API并且有一个来自设计师的原型。从下面的原型来看，我们的设计师显然不是很专业：

mock

我们的JSON API返回一些如下所示的数据：

[
  {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
  {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
  {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
  {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
  {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
  {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
];

第一步，将UI分解为组件体系

首先，你可能会在原型的每个组件（和子组件）周围画上盒子并命名这些盒子。如果你和一个设计师共事，那么你可能早已完成此项工作，所以直接去告诉他们吧。他们Photoshop的图层命名可能以你的组件名字结尾！

但是怎样设计一个组件呢？和你创建新函数或对象的原理相同，这些原理统称为单一职责原则，它的意思是一个组件仅仅只做一件事。如果组件的规模不断扩大，它应该被分解成为更小的子组件。

如果你经常显示一个JSON数据模型给用户，你会发现如果你的模型构造得恰到好处的话，你的UI（你的组件结构）将会很好的进行映射。因为UI和数据模型倾向于一致的信息结构，将你的UI分解成组件会很无聊。只需要按照你的数据模型进行分解就行了，每个组件只表示数据模型的一部分。

在我们简单的APP中，你将会看到我们有五个组件。我已经用斜体指出了每个组件所要表示的信息。

  1. FilterableProductTable (orange): 包含例子的整体结构。
  2. SearchBar (blue): 接收用户的输入。
  3. ProductTable (green): 基于用户的输入过滤和显示数据集。
  4. ProductCategoryRow (turquoise): 显示每个目录的标题。
  5. ProductRow (red): 将每个产品按列显示。

观察ProductTable，你会发现表格的头部（包含"Name"和"Price"标签）没有自己的组件。这是一个个人喜好问题，无论哪种方法都有一定的道理。对于这个例子，我把它当做ProductTable的一部分，因为它是ProductTable用来渲染数据集的一部分。然而，如果头部变得复杂起来（例如，我们增加排序特性），创建它自己的ProductTableHeader组件将无疑变得有意义。

现在我们已经在原型中定义了组件，让我们将它们整理成为一个体系。这很容易。原型中出现在别的组件中的组件在体系中作为子成员：

hierarchy

第二步，使用React构建一个静态的版本

JSFiddle

现在你已经有你的组件体系，是时候实现你的APP了。最简单的方法是编写一个没有交互，只有数据渲染的版本（译者注：即是静态版本）。最好解耦这些过程，因为编写一个静态版本需要大量的输入不需要思考，添加交互需要大量的思考不需要大量的输入。我们将一起见证为什么。

编写一个只是渲染数据模型的APP静态版本，你可能会编写一个重利用其他组件并通过props传递数据的组件。props是父组件传递数据给子组件的一个方式。如果你熟悉state的概念，完全不要使用state来编写这个静态版本。state仅仅是给交互提供的，即，数据会随着时间而改变。由于这是APP的一个静态版本，你不需要它。

你可以自上而下或自下而上编写它。即，你可以一开始就编写体系中的顶层组件（例如，以FilterableProductTable开始）或里面较低的一个（ProductRow）。在一些简单的例子中，通常自上而下容易一些，在不是很大型的应用中，自下而上的编写包括测试用例容易一些。

在这一步的结尾，你将会有一个可重用的渲染你自己数据模型的组件库。由于这是APP的一个静态版本，这些组件仅有render()方法。体系顶层的组件（FilterableProductTable）将把你的数据模型当做一个prop。如果位于数据模型下的数据发生了改变并且你再次调用了ReactDOM.render()，UI将会被更新。因为过程并不复杂，所以可以很容易看出UI的更新以及变化。React的单向数据流动（one-way data flow／ one-way binding）使得任何事都变得模块化、快速。

该如何执行此步骤可以参考此文档 React docs。

小插曲: props VS state

React有两种“model”数据：props和state。理解它们之间的区别很重要。如果你还不确定它们之间的区别，参考官方文档。

第三步，确定最小（但是是完整）描述UI的state

为了使UI变得可交互，