Mopcon2017 交流場

1. Redux? 我覺得不⾏行行，
試試看 freestyle 的 Mobx

2. 先問問看⼤大家來來⾃自哪個陣營

3. 關於 ReactMaker

4. Hyman
前端⼯工程師，喜歡研究新的技術，也喜
歡研究有趣的UI跟效果，想要帶領更更多
的⼈人進入ReactJS的世界，最近在研究
Mobx.js！
Andy
⼀一頭栽進前端世界的⼩小⼩小⼯工程師，喜歡
玩各種前端新鮮事物。 ⽬目前專注於
ReactJS，使⽤用過Flux、Redux、Mobx
等單向資料流進⾏行行專案開發。
Giant
在團隊中擔任聯聯絡窗⼝口，⽬目前是⾼高應⼤大
碩⽣生，由於對前端開發有興趣，因此就
跟⼤大⼤大們⼀一起組成讀書會，專注於學習
ReactJs。
簡單介紹⼀一下成員

5. 故事是這樣的

6. 剛開始學習React的我

7. ⼀一週後

8. Why?

9. ReactJS 特⾊色之⼀一 元件化
海海⾨門 Hyman
⽤用愛⼼心來來做事，⽤用感恩的⼼心做⼈人
<User name="海海⾨門 Hyman" desc="⽤用愛⼼心來來做事，⽤用感恩的⼼心做⼈人" src="profile.png" />

10. 海海⾨門 Hyman
⽤用愛⼼心來來做事，⽤用感恩的⼼心做⼈人
迪倫倫 Andy
當⼿手上只有鎚⼦子，看到的東⻄西都是...
及米 Jimmy
信念念、毅⼒力力、勇氣三者具備
⼩小森 Winsome
互相瞭解是朋友，互相理理解是知⼰己
x
元件化可以幫助我們
不⽤用複製貼上

11. 加上Virtual DOM，我只要改資料就可以⾺馬上渲染
海海⾨門 Hyman
⽤用愛⼼心來來做事，⽤用感恩的⼼心做⼈人
迪倫倫 Andy
⼈人永遠在追求快活，永遠在逃避痛苦
及米 Jimmy
信念念、毅⼒力力、勇氣三者具備
⼩小森 Winsome
互相瞭解是朋友，互相理理解是知⼰己
x
{
name: '海海⾨門 Hyman',
desc: '⽤用愛⼼心來來做事，⽤用感恩的⼼心做⼈人'
}
海海綿 Hyman
⽤用愛⼼心來來做事，⽤用感恩的⼼心做⼈人
{
name: '海海綿 Hyman',
desc: '⽤用愛⼼心來來做事，⽤用感恩的⼼心做⼈人'
}

12. React元件樹資料可以共享

13. 但是不同的元件樹要共享資料有困難
？？

14. 後來來我找到了了Redux來來解
決這個問題

16. 透過connect把Store的資料
注入到props 裡⾯面

17. 剛開始學習Redux的我

18. ⼀一週後

19. Why?

20. 事情是這樣的，我想做⼀一個簡單的系統，
⼤大概就是 todolist 那樣的難度

21. 然後就開始研究了了Redux資料流

23. 恩....的確是很好的設計

25. 等等...好像在哪裡看過

27. action - 聖旨

28. action creator - 內閣

29. store - 太監總管

30. reducer - 宣旨的太監

31. 皇上下旨
(Button Click Event)
內閣
(action creator)
產⽣生聖旨
(action)
太監總管派發
(store)
⼩小太監宣旨
(reducer)

32. 後來來我找到Mobx

33. 我們先來來看⼀一下Mobx資料流

34. 皇上下旨
(Button Click Event)
內閣
(action creator)
產⽣生聖旨
(action)
太監總管派發
(store)
⼩小太監宣旨
(reducer)

36. 邏輯層⾯面
Redux Mobx
store, view, action
整個單向資料流
專注於store, view

37. 狀狀態更更新
Redux Mobx
狀狀態更更新必須是Immutable 沒有特別要求

38. Middleware
Redux Mobx
有很多Middleware
(redux-thunk, redux-saga)
沒有Middleware
但是 mobs 有 mobx-util 可以轉換成 rxjs

39. Extension
Redux Mobx
有很多 也有很多
https://github.com/mobxjs/awesome-mobx#related-projects-and-utilities

41. 總結
Redux Mobx
學習曲線較陡
結構較嚴謹
適合⼤大型專案
學習曲線平緩
較有彈性
適合中⼩小型專案

42. QA Time

43. 懇請按讚
FB:ReactMaker
GH:ReactMaker

44. • https://segmentfault.com/a/1190000004257207
• http://renzhou.tw/yinwubrother-textmaker/
• https://noootown.gitbooks.io/deeperience-react-native-boilerplate/
content/Redux/Redux%20&%20React.html
• https://www.kirupa.com/react/transferring_properties.htm
• https://twitter.com/mweststrate/status/718444275239882753
參參考連結