用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:

无效
有效
无效

澳门新蒲京平台,在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扩大会更有助于高效 )

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website