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

Immutable model 簡介

81bf9a5ec95c07c4884b334456025095?s=47 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 大安本館

81bf9a5ec95c07c4884b334456025095?s=128

Jeremy Lu

November 26, 2014
Tweet

More Decks by Jeremy Lu

Other Decks in Technology

Transcript

  1. Immutable Model 簡介

  2. Jeremy Lu @thecat | jeremy@pubulous.com Founder and builder, Lovelyreader |

    Pubulous | Visualmarks | Docknote
  3. Developer 10+ years of hands-on experience

  4. Consulting Social Media Finance Real Estate Digital Publishing

  5. Founder Lovelyreader Pubulous Visualmarks Docknote

  6. FullstackRocks.com LATEST

  7. Immutable 是什麼? 每次對 model 操作,不會變動原始內 容,⽽而是返還新的物件

  8. 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 內
  9. 為何需要? - user.info.arrPhones.push({'02-1111-2222'}); - 無界不易偵知物件內部的 arrPhones[] 值已改變 - 傳統解法有 KVO,

    watcher, Object.observe(), 各有不同爛法 - 最乾淨解法是 immutable data types
  10. 有何好處? - 元件 dirty check 無敵快 - shouldComponentUpdate: function(nextProps, nextState)

    - react 元件⽣生命週期依賴 shouldComponentUpdate() 判斷此輪是否需要重繪 - ⺫⽬目前⼀一律 return true 讓元件重繪 - 如果採⽤用 immutable,可⽤用⼀一句話 nextProps === this.props ⽐比對出資料是否變動
  11. 有何好處? - 運算速度快 (因為不是 clone object,⽽而是 clone reference) - 節省記憶體消耗

    - 也因為其值保証不變,因此可當 hash key
  12. 現⾏行 react 可⽤用⽅方案 - update helper - 輕量⼿手法 - 對原本程式影響最⼩小

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

    可充份防呆 - 輕易操作深層物件結構 - 內部使⽤用 hash maps tries & vector tries - ⽀支援 chaining 操作 * http://goo.gl/GdrcfL
  14. 現⾏行 react 可⽤用⽅方案 - view plugin - 是個 React mixin,直接跟

    view 綁在⼀一起 * http://goo.gl/HWkloq
  15. 現⾏行 react 可⽤用⽅方案 - Transducers * https://github.com/jlongster/transducers.js - Mori -

    最像 clojure 語法,較怪異 * https://github.com/swannodette/mori - Cortex * https://github.com/mquan/cortex
  16. 現⾏行 react 可⽤用⽅方案 - OM - 純 clojure 語法,純欣賞兼致敬⽤用... *

    https://github.com/swannodette/om
  17. 推薦哪個? - 資料結構單純的⽤用 update helper - ⼤大案⼦子⽤用 immutable.js - immutablejs

    與 update 的差異 - immutablejs 可以防呆,update 不⾏行
  18. 為何不該⽤用 immutable? - 90% 的案⼦子都沒這麼複雜 - 並且 VDOM 的 diff

    本⾝身很有效率,可先⽤用它擋著
  19. 為何不該採⽤用 immutable? - 現⾏行⼤大部份 immutable ⽅方案都讓程式碼變的更⻑⾧長、 更⿇麻煩、也更難寫 - 因此⼀一定要先 benchmark

    確認瓶頸在 dirty checking,才值得改⽤用 immutable - 你會⽤用 devtools 的 timeline 與 profiler 對吧?
  20. 你會⽤用 devtools 的 timeline 與 profiler 對吧?

  21. 為何不該採⽤用 immutable? - 官⽅方也強調⽤用在 performance critical 的地⽅方才會有 明顯好處

  22. 何時該⽤用 immutable model? - 程式裏有幾百個元件同時運⾏行導致效率不佳時

  23. 何時該⽤用 immutable model? - 需要 undo/redo 時 - 每次變動 model

    後,皆會返還⼀一份新 model - 每次將舊的 model 塞⼊入 array 內保存,就免費獲得 undo/redo 功能 - ⼤大前提是 view 真的有忠實反應 model state - single source of truth + always redraw 原則 - Undo 就是抽換不同版本 model,view 就保証重繪 - 但如果某些狀態值只保存在 view 端,這招就 gg
  24. 何時該⽤用 immutable model? - 就算要⽤用 - 可以只選部份關鍵資料採⽤用 - 其它不會共⽤用的資料結構仍可延⽤用普通 js

    資料格式
  25. 其它注意事項 - 範例裏常⽤用 ES6 語法 - 例如 fat arrow function

    =>
  26. 其它注意事項 - 選擇正確的 data structure ,剩下的問題都好解決

  27. 其它注意事項 - 有類似 OM 的 cursor 功能 - 可深⼊入 model

    內部取出⼀一⼩小部份資料餵給元件當作 state - 因此操作⼿手續上較單純 * http://goo.gl/ZTpRXL
  28. 其它注意事項 - ⾄至少 2015 年初再開始⽤用 immutable.js,那時⼤大概出 到 v4 版,API 會更穩定

  29. 90% 以上的機會你不需要⽤用到 immutable,或有其它更佳解 法,因此⾏行動前請務必三思。

  30. Professional training on fullstack development at fullstackrocks.com

  31. jeremy@pubulous.com Questions?