以下是React官方文档中的Thinking inReact文章的翻译，第一次翻译英文的文章，肯定有很多不正确的地方，还望多多包涵。
原文地址：https://facebook.github.io/react/docs/thinking-in-react.html
原文开始
---------------------------------------------我是分隔符------------------------------------------
Thinking in React
by Pete Hunt
React是什么？我的看法是，它是用javascript创建大型，快速web应用的首要方式。Fackbook和Instagram为我们做了很好的测试。
React的其中一个非常厉害的部分就是它是让你在构建你的应用时如何去思考的。接下来，我会带你体验一下怎样使用React去构建一个有搜索功能的产品数据表。
Start with a mock
想象一下我们已经有了JSON数据的API和设计师给的网站模型。我们的设计师明显不怎么样因为他给的模型是这样的：
我们的JSON接口返回的数据是这样的：
Step 1: Break the UI into a component hierarchy(把UI分割成组件层)
你要做的第一件事就是在组件周围画上盒子并且给它们取一个名字。有过你和网页设计师一起工作，那他们可能已经做过这个工作了，去和他们谈谈。他们的
photoshop layer的名字，最后应该就会成为你的React组件的名字。但是你怎么知道谁应该成为一个单独组件呢？用这个方法就可以了：根据你是否需要去创建一个新的方法或者对象就可以决定是否是一个组件。这就是单一职责原则，原则就是：一个组件在理想状态下只做一件事情。如果之后需要扩展，那么就把它分割成子组件。
如果你经常向用户展示JSON数据模型，你就会发现如果你的模型建立正确的话，你的UI(也就是你的组件结构)的布局就不会有问题。因为UI和数据模型都是依靠相同的信息结构，这也就以为这把你的UI分隔成组件是很平常的。去把UI分隔成代表单块数据模型的组件吧。
你可以看到在我们简单地应用中有五个组件，
1.FilterableProductTable(橙色)： 包含了应用这个整体。
2.SearchBar(蓝色)：接收了用户输入
3.ProductTable(绿色):依据用户输入展示和过滤数据
4.ProductCategoryRow(天蓝色)区域标题
5.ProductRow(红色)：展示每个产品的行
看一下ProductTable，你就会发现表头(包含‘Names’和‘Price’标签)不是它自己的组件。这是一种偏好，对此有很多的争论。在这个例子中，我把它放在了ProductTable里边，是因为它是渲染ProductTable数据集中的一部分。然而，如果这个表头变复杂了(例如：我们加入了排序功能)，它就得建立自己的ProductTableHeader元素。现在我们已经确认了我们用例中的组件，那就把它们层次化。组件中的小组件在层次化中应该表现成子类。
Step 2: Build a static version in React（在React中建立一个静态版本）
现在我们的组件已经层次化了，是时间去实现我们的应用了。最简单的方式是建立一个UI是依靠你的数据模型渲染的但是并没有交互的版本。最好要拆解这些步骤，因为建立一个静态的版本需要在没有想法的情况下写很多的代码，添加交互就需要思考很多并且写很少的代码。下面会知道为什么。
建立一个渲染你的数据模型的应用的静态版本，你会想去建立能复用其他组建的组件，并且使用props传递数据。props是父辈向下传递数据的方式。如果你很熟悉state的概念，不要在这个静态版本里面用state。state仅仅是为了交互而存在，里边的数据是一直在变的。尽然这是一个静态版本，那就不要用state。
你可以从上往下或反向建立，也就是你可以依据应用的层级从高层向底层(例如从FilterableProductTable开始)或反向实现(从ProductRow开始)。再简单的例子中，从上至下更容易，在大型项目中，从下向上地建立和测试应用更简单。
在这一步的最后，你会用一个可复用的组件库去渲染你的数据模型。既然这是一个应用的静态版本，那么组件就只会拥有render()方法。在组件层顶端的组件就会把数据模型作为prop。如果你修改底层的数据模型，然后再次调用ReactDOM.render()，UI会被更新。很容易就可以看到你的UI怎样更新，哪里做了改变，之后就没有什么复杂的东西了。React是依靠单向数据流使得所有事情模块化和快速。
var ProductCategoryRow = React.createClass({
render: function() {
return (<tr><th colSpan="2">{this.props.category}</th></tr>);
}
});
var ProductRow = React.createClass({
render: function() {
var name = this.props.product.stocked ?
this.props.product.name :
<span style={{color: 'red'}}>
{this.props.product.name}
</span>;
return (
<tr>
<td>{name}</td>
<td>{this.props.product.price}</td>
</tr>
);
}
});
var ProductTable = React.createClass({
render: function() {
var rows = [];
var lastCategory = null;
this.props.products.forEach(function(product) {
if (product.category !== lastCategory) {
rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
}
rows.push(<ProductRow product={product} key={product.name} />);
lastCategory = product.category;
});
return (
<table>
<thead>
<tr>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
);
}
});
var SearchBar = React.createClass({
render: function() {
return (
<form>
<input type="text" placeholder="Search..." />
<p>
<input type="checkbox" />
{' '}
Only show products in stock
</p>
</form>
);
}
});
var FilterableProductTable = React.createClass({
render: function() {
return (
<div>
<SearchBar />
<ProductTable products={this.props.products} />
</div>
);
}
});
var PRODUCTS = [
{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'}
];
ReactDOM.render(
<FilterableProductTable products={PRODUCTS} />,
document.getElementById('container')
);Step 3: Identify the minimal (but complete) representation of UI state（找到最小的UI state的代表）
为了实现你的UI的交互性，你需要去触发你的底层数据模型的改变。React通过运用state使这变得很容易。
为了正确的创建你的应用，第一步应该考虑的是你的应用需要的最小单位的可变state。关键技巧就是：不要重复。找出你的应用需要的state绝对最小代表，然后去推算你需要的所有其他东西。例如：如果你在建一个TODO列表，那就仅仅在这TODO items周围保存一个数组；不要为了数组长度去保存一个state，如果需要，就去取数组长度。
想一下我们应用中的所有数据片段。我们有：
1.最原始的产品列表
2.用户输入的搜索文本
3.checkbox的值
4.被筛选的产品
我们挨个看一下，找出哪一个是state。对于每一个数据片段提三个问题：
1.这是从父辈传过来的props吗?如果是，则它不是state。
2.它实时在改变吗?如果不是，则不是state。
3.你能在组件中通过其他的state或者props得出它来吗？如果能，则不是state。
最原始的产品清单是被当做props传递的，它不是state。搜索文本和checkbox看起来像是state，因为它们实时在变而且不能通过其它数据得出。最后，被筛选的产品列表不是state，因为它能够通过搜索文本，checkbox和原始产品清单得出。
所以，我们的state就是：搜索文本和checkbox的值。
Step 4: Identify where your state should live（确认你的state应该放在哪）
好的，这样我们就确认了应用中state的最小单位（set）。下一步 ，我们需要确认哪一个组件改变或者拥有这个state。请记住，react在我们的组件层次中是单向数据流动的。可能不会一下就看明白哪个组件拥有哪个state。这一点对新手来说经常是最有挑战性的部分，所以依据以下步骤可以弄明白：
对于你的应用中每一个state：
-确认每一个依靠这个state去渲染sth的组件
-找到一个组件共有者（在组件层次中，位于所有组件上层的单独组件也需要这个state）
-不管是组件共有者还是组件层中的上层组件都应该拥有这个state
-如果你找不到一个拥有这个state的组件，那就创建一个功能只是保存这个state的组件，把它放到组件共有者的上方。
我们在当前的应用中试一下上边的策略。
-ProductTable需要依据state去筛选产品列表，SearchBar展示搜索文本和checkbox状态也需要state。
-组件共有者是FilterableProductTable.
-把filter text和checked value放在FilterableProductTable里边从概念上来说是行的通的。
Cool，我们就这样愉快地决定了把state放在FilterableProductTable里边。首先，在FilterableProductTable里添加一个getInitialState()方法，返回值是{filterText: '', inStockOnly: false}，反映了应用的初始state。然后，把filterText和inStockOnly当做prop传入ProductTable和SearchBar中。最后，用这些props过滤ProductTable中的rows，设置SearchBar中的
表单字段的值。
现在你就能看到你的应用是如何运行的：将filterText设为“ball”然后刷新应用，你就能看到数据表正确更新了。
var ProductCategoryRow = React.createClass({
render: function() {
return (<tr><th colSpan="2">{this.props.category}</th></tr>);
}
});
var ProductRow = React.createClass({
render: function() {
var name = this.props.product.stocked ?
this.props.product.name :
<span style={{color: 'red'}}>
{this.props.product.name}
</span>;
return (
<tr>
<td>{name}</td>
<td>{this.props.product.price}</td>
</tr>
);
}
});
var ProductTable = React.createClass({
render: function() {
var rows = [];
var lastCategory = null;
this.props.products.forEach(function(product) {
if (product.name.indexOf(this.props.filterText) === -1 || (!product.stocked && this.props.inStockOnly)) {
return;
}
if (product.category !== lastCategory) {
rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
}
rows.push(<ProductRow product={product} key={product.name} />);
lastCategory = product.category;
}.bind(this));
return (
<table>
<thead>
<tr>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
);
}
});
var SearchBar = React.createClass({
render: function() {
return (
<form>
<input type="text" placeholder="Search..." value={this.props.filterText} />
<p>
<input type="checkbox" checked={this.props.inStockOnly} />
{' '}
Only show products in stock
</p>
</form>
);
}
});
var FilterableProductTable = React.createClass({
getInitialState: function() {
return {
filterText: '',
inStockOnly: false
};
},
render: function() {
return (
<div>
<SearchBar
filterText={this.state.filterText}
inStockOnly={this.state.inStockOnly}
/>
<ProductTable
products={this.props.products}
filterText={this.state.filterText}
inStockOnly={this.state.inStockOnly}
/>
</div>
);
}
});
var PRODUCTS = [
{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'}
];
ReactDOM.render(
<FilterableProductTable products={PRODUCTS} />,
document.getElementById('container')
);STEP 5：Add inverse data flow（添加反向数据流）
到这里，我们建立了一个能够根据state和prop在模块层间的流动去正确渲染的应用。现在是时候去支持数据的另一种方式流动：在深层次中的表单组件需要在FilterableProductTable里去更新state。React中的这种数据流动非常明确清晰，所以能够非常容易得理解你的应用是怎样工作的，但是这需要比通常的双向数据绑定写更多的代码。React提供了额外的一个叫做ReactLink的工具让这种模式变得像双向数据绑定一样的舒服，这样的目的就是，让所有的事情变得更明确。
如果你尝试着去在最近版本样例里去写代码或检查checkbox，你会看到React忽略了你的输入。这是有意为之的，因为我们设置了input的prop一直是和FilterableProductTable传过来的state相同的。 我们来想一下我们想要什么样的事情发生。我们想确保无论用户什么时候改变表单，我们就去更新state以便反映出用户的输入。既然组件应该仅仅更新他们自己的state，FilterableProductTable会传递给SearchBar回调函数，在state需要更新的时候就会调用。我们可以在input上使用onchange事件去通知调用callback。被FilterableProductTable传递过来的callback会调用setState()，然后应用就会被更新了。
尽管这听起来很复杂，但是真的只是需要几行代码。并且你的应用中数据的流动过程会非常的清晰。And that's it。
但愿这篇文章能够帮助你弄清楚怎么用React去建立组件和应用。尽管这要比平时多写一些代码，但是请记住代码的可读性的重要性要远远超过代码的书写，阅读这些模块化和非常清晰的代码是非常容易的。当你开始建立大型的组件库，你就会感谢这种明确性和模块化，随着代码的复用，你的代码量就会开始减少了。
var ProductCategoryRow = React.createClass({
render: function() {
return (<tr><th colSpan="2">{this.props.category}</th></tr>);
}
});
var ProductRow = React.createClass({
render: function() {
var name = this.props.product.stocked ?
this.props.product.name :
<span style={{color: 'red'}}>
{this.props.product.name}
</span>;
return (
<tr>
<td>{name}</td>
<td>{this.props.product.price}</td>
</tr>
);
}
});
var ProductTable = React.createClass({
render: function() {
var rows = [];
var lastCategory = null;
this.props.products.forEach(function(product) {
if (product.name.indexOf(this.props.filterText) === -1 || (!product.stocked && this.props.inStockOnly)) {
return;
}
if (product.category !== lastCategory) {
rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
}
rows.push(<ProductRow product={product} key={product.name} />);
lastCategory = product.category;
}.bind(this));
return (
<table>
<thead>
<tr>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
);
}
});
var SearchBar = React.createClass({
handleChange: function() {
this.props.onUserInput(
this.refs.filterTextInput.value,
this.refs.inStockOnlyInput.checked
);
},
render: function() {
return (
<form>
<input
type="text"
placeholder="Search..."
value={this.props.filterText}
ref="filterTextInput"
onChange={this.handleChange}
/>
<p>
<input
type="checkbox"
checked={this.props.inStockOnly}
ref="inStockOnlyInput"
onChange={this.handleChange}
/>
{' '}
Only show products in stock
</p>
</form>
);
}
});
var FilterableProductTable = React.createClass({
getInitialState: function() {
return {
filterText: '',
inStockOnly: false
};
},
handleUserInput: function(filterText, inStockOnly) {
this.setState({
filterText: filterText,
inStockOnly: inStockOnly
});
},
render: function() {
return (
<div>
<SearchBar
filterText={this.state.filterText}
inStockOnly={this.state.inStockOnly}
onUserInput={this.handleUserInput}
/>
<ProductTable
products={this.props.products}
filterText={this.state.filterText}
inStockOnly={this.state.inStockOnly}
/>
</div>
);
}
});
var PRODUCTS = [
{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'}
];
ReactDOM.render(
<FilterableProductTable products={PRODUCTS} />,
document.getElementById('container')
);------------------------------------------------我是分隔符--------------------------------------------------
原文结束。
本文主要是依据一个产品标的例子来介绍React的单向数据流的思想，从一开始怎样分析网站模型的结构，怎样划分组件，组件中的数据，数据之间的关系，根据这些关系，有固定的方法来帮助我们决定哪一些数据属于state，哪一些是prop，确定了state之后，就可以给state依存的组件添加监听方法，监听input输入的变化，从而实时更新数据模型，重新渲染界面。
1770
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
