学习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)