w3ctech

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)

w3ctech微信

扫码关注w3ctech微信公众号

共收到4条回复