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条回复