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 大安本館

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?