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;
};</pre> 
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