React入门学习实例

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