12.React中文之对React的思考

在我们看来，React是用JavaScript构建大的快的Web App的首选。在Facebook和Instagram中它对我们来说非常好。

React的伟大部分之一是如何让你在构建应用程序时考虑应用程序。在这个文档中，我们将介绍用React构建一个可搜索产品数据表的思考过程。

模拟开始

想象我们已经有一个JSON API和我们设计的模型。模型看起来是这样的：

我们的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"}
];

参照官网，实际编写代码试试吧：

https://facebook.github.io/react/docs/thinking-in-react.html

第三步：鉴定UI状态的最小(但是完成的)表示法。

为了使UI可以交互，你需要能触发根本的数据模型的改变。React使状态这个更容易。

为了正确地构建你的APP,首先你需要思考你的app需要的易变的状态的最小集。这里的关键是DRY:不要重复你自己。断定你的应用需要的状态的最小表示并计算你需要请求的别的任何东西。例如，如果你正在创建一个TODO列表，只要创建一个TODO项数组就可；不要给计数一个单独的状态。相反，当你想要渲染TODO数时，很容易获取TODO项数组的长度。

思考我们例子应用中所有数据的零件。我们有：

~产品的原始列表

~用户已经输入的查询文本

~勾选框的值

~产品过滤的列表

让我们仔细查看每一零件并指出哪个是状态。关于每一份数据，简单问三个问题：

1.它是从父类通过props传递过来的么？如果是，它可能不是状态。

2.它会随时不会变化么？如果是，它可能不是个状态。

3.你能基于你组件的任何其他状态或者属性计算它么？如果可以，它不是个状态。

产品的原始列表时通过属性传递过来的，所以它不是个状态。搜索框文本和勾选框似乎是个状态，因为它们随时间变化且不能由其它任何东西计算。最后，过滤的列表不是个状态因为它是由搜索框文本和勾选框的值和产品的原始值列表联合计算出来的。

最后，我们的状态是

用户输入的搜索框文本；

勾选框的值。

第四步：识别你的状态应该活跃在哪儿？

好的，我们已经识别app状态的最小集是什么。接下来，我们需要识别哪个组件改变或者拥有这个状态。

记住：React是顺着组件层单向数据流。哪个组件拥有什么状态不是立马清楚的。This is often the most challenging part of newcomers to understand,so follow these steps to figure it out:

这经常是新手理解最有挑战的部分，因此跟随以下步骤指出它：

在应用中每个状态部分：

~识别基础状态渲染内容的组件。

~寻找共同拥有的组件(在层次中拥有状态的所有组件之上的一个单独组件)

~一个共同拥有者或者另一个在层次中更高的组件应该拥有这个状态

~如果你不能找到拥有状态有意义的组件，简单地创建一个新组件持有这个状态并把它添加在共同拥有者组件的更高层上。

让我们执行我们应用的战略：

ProductTable需要过滤基于状态的产品列表和SearchBar需要展示搜索文本和勾选状态。

共同拥有者组件是FilterableProductTable。

概念上过滤文本和勾选值活跃在FilterableProductTable中是有意义的。

Cool,因此我们已经决定我们的状态放在FilterableProductTable中。首先，添加一个实例属性this.state={filterText:'',inStockOnly:false} 给FilterableProductTable's构造函数，表达应用的初始状态值。然后，将filterText和inStockOnly作为属性传递给ProductTable。最后，使用这些属性过滤ProductTable的行并设置SearchBar的表单字段值。

你可以开始看你的应用将如何运转：设置filterText为ball并刷新。你将看见数据表格被正确更新。

第五步：添加反数据流

到目前为止，我们已经创建一个App,它能作为一个属性和状态随层流的函数的形式正确地渲染。现在，支持数据随相反方向流动的时间到了：在层深处的表单组件需要更新FilterableProductTable的状态。

React使数据流变得明确，从而使理解你的项目如何工作变得容易，但是它比传统的双向数据绑定需要多点的代码。

如果你在当前例子的版本中打字或者勾选，你将看到React忽略你的输入。这就是故意的：我们已经设置input的value属性总是等于FilterableProductTable传递的state。

让我们思考一下发生了什么。我们想要确保无论用户何时改变表单，我们都可以更新这个状态反映用户输入。因为组件只能更新它们自己的状态，FilterableProductTable将回调给SearchBar,无论状态何时更新都会被激发。我们可以在inputs中使用onChange事件通知回调函数。FilterableProductTable传递的回调函数将调用setState(),app将更新。

尽管这听起来挺复杂，实际上只是几行代码的事。你的数据如何贯穿整个app是真正地清晰的.

这些就是React

希望，这些能给你一个想法：如何用React想着构建组件和应用。尽管它可能比你过去使用的打更多字，记得代码书写远远超过它的阅读，阅读模块化的清晰的代码是极其容易的。当你开始创建组件大的库时，你将感激它的清晰和模块化，以及代码的复用，你每行代码将开始缩短。