Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React native redux_sharing

201 views

Published on

JSDC 2016 - React Native / Redux is easy but also not easy

Published in: Software
  • Be the first to comment

  • Be the first to like this

React native redux_sharing

  1. 1. REACT NATIVE / REDUX 簡單 也 不簡單 SAM LEE
  2. 2. Sam Lee : FED : / 

  3. 3. react-native init AwesomeProject
  4. 4. React 是什麼?
  5. 5. React JS VDOM WEB COMPONENT
  6. 6. React Native 又是什麼?
  7. 7. React Native VDOM NATIVE
 OBJECT iOS Android Windows Tizen OSX QT VR
  8. 8. React Native 的原理是?
  9. 9. !!!!!!!
  10. 10. ReactJS Native
 Function JavascriptCore Javascript Bridge RCTBridge Obj-C bridge
  11. 11. - 2015/10 - React Native v0.11 ( Support Android) - 2016/04 in Facebook F8 conference , Microsoft and Samsung have committed to 
 bringing React Native to Windows 10 and Tizen - 2016/10/06 React VR announcement! - 2016/10/ React Native v0.35 
 2 1 release
  12. 12. 什麼是 Redux ?
  13. 13. Object: Action: Object: State: State:
  14. 14. React Native Redux +
  15. 15. Mobile 常⾒的 UI 結構
  16. 16. Redux Provider Navigator AUTH NAVIGATOR MAIN Navigator SUB NAVIGATOR SUB NAVIGATOR SUB NAVIGATOR
  17. 17. NAVIGATOR MAIN VIEW SUB NAVIGATOR COMPONENT 基本架構
  18. 18. Redux 很⽅便 但不能濫⽤ Connect
  19. 19. NAVIGATOR MAIN VIEW SUB NAVIGATOR COMPONENT Connect with Store Connect with Store Connect with Store Connect with Store 資料的傳遞
  20. 20. NAVIGATOR MAIN VIEW SUB NAVIGATOR COMPONENT Connect with Store Connect with Store Connect with Store Connect with Store Update Update Update Update Dispatch Action Dispatch Action Dispatch ActionDispatch Action 資料的傳遞
  21. 21. NAVIGATOR MAIN VIEW SUB NAVIGATOR COMPONENT Connect with Store props props Connect with Store Update Update Dispatch Action 資料的傳遞 Dispatch Action Update Update
  22. 22. 專案最後都會搞⼤, 如果⼀開始
 ⼿法單純, 將來還有機會控制, 
 反之, 則必然悲劇收場 . By Jeremy Lu
  23. 23. 在 React Native
 經過, 路過, 也不會錯過的 坑
  24. 24. 不必要的 Render 坑
  25. 25. 我好像...舉不起來
  26. 26. 看似 ! 簡單的動作....
  27. 27. !! ( )
  28. 28. 從 Code 來看就是這樣⼦
  29. 29. ShouldComponentUpdate ShouldComponentUpdate ShouldComponentUpdate 很重要 !!!
  30. 30. Deep equal or Immutable
  31. 31. STORE VIEW State Deep Equal: 1. Store 發⽣變化 2. State change 3. Connect 的 Component 觸發 ReRender 4. Deep Equal 判斷 State 內容是否相同 5. ⼀樣就不更新 (ShouldComponentUpdate 
 false)
  32. 32. STORE VIEW State Immutable: 1. Store 發⽣變化 2. State change 3. Connect 的 Component 觸發 Refresh 4. 利⽤ === 判斷指標是否相同 5. ⼀樣就不更新 (ShouldComponentUpdate 
 false)
  33. 33. 簡單來說 Deep Equal ⽤的是⼤腦
  34. 34. Immutable ⽤的是
 直覺
  35. 35. ListView 坑
  36. 36. 我...拿不動了
  37. 37. 問題點: ListView 的實現⽅式 - React Native - Scroll View - Native - Table View
  38. 38. 不同點: - React Native - Scroll View
 (不會回收 ! 不會! 不會 !) - Native - Table View
 (⾃動回收機制)
  39. 39. 78分 不能再低了
  40. 40. 解法: ⾯對它, 回收它
  41. 41. ListView 空⼼
 VIEW 有內涵 的VIEW 空⼼
 VIEW 有內涵 的VIEW 有內涵 的VIEW 可視範圍 範圍外範圍外
  42. 42. https://github.com/sghiassy/react-native-sglistview
  43. 43. Navigator 坑
  44. 44. Navigator的原理是
 Stack!
 Stack!
 Stack!
  45. 45. 注意 Navigator Stack 的狀態
  46. 46. ⼀直 Push View
 就會⼀直變多
 直到無法控制 (此時如果加上 Store data update)
 就 GG 了 87分
 不能再⾼
  47. 47. 管理好 Stack 1. Main View 間的跳轉 直接切換 2. Main View -> Sub View 使⽤ Push 3. 轉/跳回 Root Page 時 清空 Stack
  48. 48. React Native
 更新太快!! (好? 壞?) 坑
  49. 49. DEMO啦
  50. 50. React Native
 Z > B
  51. 51. React Native Z > B 1. 不⽤怕沒有 Solution (上⾯⼀群神⼈在幫你) 2. 更新很快, 這次沒有的 Feature 下次可能就有了 3. 刻 UI 不⽤等 !!! (省太多時間了) 4. ⼀套 Code 同時開發 2 個平台 (Reuse rate ⾼達 80%) 5. 80%的問題都是 1個 solution for 2 個平台
 (當然 bug 也是⼀次 2 個平台...)
  52. 52. 當然最⼤的 Z 是....
  53. 53. FED is not only for WEB, 
 but also for ALL TERMINALS !!!
  54. 54. 發問吧! 我可以休息了

×