ReactJS

ReactJS 是 Facebook 提出的 interface library，專注在 ‘view’ 的更新，避免直接操作 DOM 物件。第一次看到 ReactJS 時，其實我看到

我就暈了，以前用```document.create('div')``` ，然後```appendChild```等等。發現這樣操作 DOM 物件效能很差，後來改用 innerHTML 來更新 DOM，現在又說要用這種方式來寫（眼神死）。


# Z>B?
但用了之後才發現驚為天人。以往在做較複雜的 UI 時，會針對不同狀態重新 render 整個畫面，而且 rerender 最簡單，不用去管現在到底是怎樣的狀態。但若資料量龐大的時候，rerender 的成本就非常高，因此在做效能優化時，必須針對「改變」的元素做操作。ReactJS 提出了一個 [diff algorithm](http://calendar.perfplanet.com/2013/diff/)，將 data 與 DOM element mapping 之後去檢查 data 的改變才更新 DOM element，讓開發者可以專注在 data 的變化，而不需要直接操作 DOM element，也可以將邏輯與 UI 呈現分開。總之是 Z>B。
* [Why React?](http://facebook.github.io/react/docs/why-react.html)
# 快速上手
其實 ReactJS 相當簡單，因為這個 library 只專注在 view 的更新，官方文件也蠻清楚的：<http://facebook.github.io/react/docs/getting-started.html>
# 階層選單
寫了一個小範例用 ReactJS 實作階層選單，來感覺一下有什麼差別。
[![49471a6e7bb694044b250100016aad8d.gif](http://user-image.logdown.io/user/96/blog/96/post/197195/D17TnI85RK1bBnQebScm_49471a6e7bb694044b250100016aad8d.gif)](http://jsbin.com/fuziz/19/edit)
<http://jsbin.com/fuziz/19/edit>
### onChange event
在 select element 的 change evnet 處理 2nd 選單的更新，最大的差別在於只要把資料丟進去就會根據 data 的改變做 refresh。
``` coffeescript
$component.find('#company').on('change', (event)->
  $target = $(event.target)
  id = $target.find('option:selected').attr('value')
  product = {}
  
  if products[id]
    product = products[id]
  Component.update('product', 'dropdown', product)
)

小結

data binding 的機制其實跟 angularJS 很像，但 ReactJS 只針對 data 與 view 的更新，很適合在專案中抽離 template engine 來提升效能，看起來雖然不會少寫多少程式，但至少不用再針對 DOM element 直接操作，也降低 bug 的產生。現在就很不喜歡寫 $('element').find('a').css('color', '#CCC').trigger('blabla')這樣的程式。