Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Immutable model 簡介

Jeremy Lu
November 26, 2014

Immutable model 簡介

這是 reactjs.tw 第二次聚會時的演講內容,介紹當前 reactjs 可用的 immutable 方案與應用時機。

相關討論請前往 https://www.facebook.com/groups/reactjs.tw/

Also have a look at my new adventure: www.fullstackrocks.com!

2014/11/26 7:00pm at CLBC 大安本館

Jeremy Lu

November 26, 2014
Tweet

More Decks by Jeremy Lu

Other Decks in Technology

Transcript

  1. Immutable 是什麼? - 以 Array.map() 為例 var arr1 = ['a',

    'b', 'c']; var arr2 = arr1.map( function(item){ return 'x_' + item} ) // ["x_a", "x_b", "x_c"] - arr1 原始內容不變,map 處理後的值在 arr2 內
  2. 有何好處? - 元件 dirty check 無敵快 - shouldComponentUpdate: function(nextProps, nextState)

    - react 元件⽣生命週期依賴 shouldComponentUpdate() 判斷此輪是否需要重繪 - ⺫⽬目前⼀一律 return true 讓元件重繪 - 如果採⽤用 immutable,可⽤用⼀一句話 nextProps === this.props ⽐比對出資料是否變動
  3. 現⾏行 react 可⽤用⽅方案 - update helper - 輕量⼿手法 - 對原本程式影響最⼩小

    - 語法⿇麻煩(尤其遇到深層結構時) - 無法防呆 * http://goo.gl/jpSxnB
  4. 現⾏行 react 可⽤用⽅方案 - immutablejs - 較重 - 要根本改變資料結構 -

    可充份防呆 - 輕易操作深層物件結構 - 內部使⽤用 hash maps tries & vector tries - ⽀支援 chaining 操作 * http://goo.gl/GdrcfL
  5. 現⾏行 react 可⽤用⽅方案 - Transducers * https://github.com/jlongster/transducers.js - Mori -

    最像 clojure 語法,較怪異 * https://github.com/swannodette/mori - Cortex * https://github.com/mquan/cortex
  6. 為何不該採⽤用 immutable? - 現⾏行⼤大部份 immutable ⽅方案都讓程式碼變的更⻑⾧長、 更⿇麻煩、也更難寫 - 因此⼀一定要先 benchmark

    確認瓶頸在 dirty checking,才值得改⽤用 immutable - 你會⽤用 devtools 的 timeline 與 profiler 對吧?
  7. 何時該⽤用 immutable model? - 需要 undo/redo 時 - 每次變動 model

    後,皆會返還⼀一份新 model - 每次將舊的 model 塞⼊入 array 內保存,就免費獲得 undo/redo 功能 - ⼤大前提是 view 真的有忠實反應 model state - single source of truth + always redraw 原則 - Undo 就是抽換不同版本 model,view 就保証重繪 - 但如果某些狀態值只保存在 view 端,這招就 gg
  8. 其它注意事項 - 有類似 OM 的 cursor 功能 - 可深⼊入 model

    內部取出⼀一⼩小部份資料餵給元件當作 state - 因此操作⼿手續上較單純 * http://goo.gl/ZTpRXL