学习React之初并不轻松，不是React造了多少新概念，只是它打破了一些传统意义上的“最佳实践”。用React也不会令你少写多少代码，什么5分钟写一个blog，几行代码就能实现个什么之类的。工具不是越傻瓜越好，要看目标用户是谁，解决什么问题。
React是框架不是库。区分这个的目的是不要把它当传统认识的库用，直接说就是不要把React当jQuery用。比如：$(‘.button’).click(doSomething)，这是典型的库思维：找到目标，转成jQuery对象，绑上事件，执行处理。每一步都是在下“指令”。用React不要尝试把页面上的DOM变成虚拟DOM再do something，反过来跟jQuery混用时，也不要试图操作React生成的DOM（这是错误的把React当模板引擎用了），要做什么就通过组件实例提供的接囗do something。
先看个混用的例子，HTML：
<span class="status" data-id="1" data-status="H">无效</span> <span class="status" data-id="2" data-status="N">有效</span> <span class="status" data-id="3" data-status="H">无效</span>
在JS里，做一个叫StatusModifier的组件:
$.each('.status', function(i, e){
var el = $(e);
var data = el.data();
var modifier = React.render(<StatusModifier id={data.id}
status={data.status}
onChange={ handleChange } />, e);
// 如果想操作组件就把modifier这个实例cache在任何方便拿的地方
// 于是这块交互随它的复杂度一同被分离出去了
});
function handleChange(id, status) {
// do something;
};
StatusModifier内部怎么玩都可以了：
module.exports = React.createClass({
getInitialState: function() {
return {
id: this.props.id,
status: this.props.status
}
},
render: function() {
var status;
if (this.state.status == 'H'){
status = ['无效',
<a href="javascript:;" onClick={ this.handleClick.bind(this, 'N')}>激活</a>];
} else if (this.state.status == 'N') {
status = ['有效',
<a href="javascript:;" onClick={ this.handleClick.bind(this, 'H')}>暂停</a>];
}
return (
<div>
{ status }
</div>
);
},
handleClick: function(status, e) {
// 状态变，UI自动变。
this.replaceState({
status: status
});
this.props.onChange && this.props.onChange(this.props.id, status);
}
});
如果说这个小需求用jQuery直接写不是更简单吗？当交互变了，status的情况变复杂了，这么写的优势就体现出来了。比如，状态切换是想加个动画效果，修改一下return那里：
...
return (
<div>
<FadeEffect>
{ status }
</FadeEffect>
</div>
);
...
FadeEffect是一个动画效果组件。举一个我实际项目中的例子，交互是点图片列表中的某个图片，预览大图，大图是从小图位置飞出：
<TweenWrapper
className="album-preview-photo"
from={preview.fromPos}
to={preview.toPos}
duration={ 300 } >
<Image key={ preview.url } src={ preview.url } />
</TweenWrapper>
TweenWrapper是我写的另外一个组件，参见全部代码。这两个例子为了说明声明式UI的好处。首先直观、自然分离出组件（复杂度也自然被分离）、扩展灵活，个体组件即便于复用也便于测试…组件就是这样一层层加上，也可以一层层剥去。
在React里处理表单，参见这份完整的代码。以往开发中搞表单很麻烦，在React里用状态控制很灵活，不想重复说了。如果有问题可以po出来讨论。 (@CosuScript 提到表单用DeepLinkState扩展会更方便高效?https://gist.github.com/NV/8622188)
