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

1. REACT NATIVE /
REDUX 簡單 也 不簡單
SAM LEE

2. Sam Lee
: FED
: /

3. react-native init AwesomeProject

4. React 是什麼?

5. React JS
VDOM
WEB
COMPONENT

6. React Native 又是什麼?

7. React Native
VDOM NATIVE
OBJECT
iOS
Android
Windows
Tizen
OSX
QT
VR

8. React Native 的原理是?

9. !!!!!!!

10. ReactJS
Native
Function
JavascriptCore
Javascript Bridge
RCTBridge
Obj-C bridge

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. 什麼是 Redux ?

14. Object: Action: Object:
State: State:

16. React Native Redux
+

17. Mobile 常⾒的 UI 結構

18. Redux Provider
Navigator
AUTH NAVIGATOR
MAIN Navigator
SUB NAVIGATOR
SUB NAVIGATOR
SUB NAVIGATOR

19. NAVIGATOR MAIN VIEW
SUB
NAVIGATOR
COMPONENT
基本架構

20. Redux 很⽅便
但不能濫⽤ Connect

21. NAVIGATOR MAIN VIEW
SUB
NAVIGATOR
COMPONENT
Connect with Store Connect with Store
Connect with Store
Connect with Store
資料的傳遞

22. 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
資料的傳遞

23. NAVIGATOR MAIN VIEW
SUB
NAVIGATOR
COMPONENT
Connect with Store
props
props
Connect with Store
Update Update
Dispatch Action
資料的傳遞
Dispatch Action
Update
Update

24. 專案最後都會搞⼤, 如果⼀開始
⼿法單純, 將來還有機會控制,
反之, 則必然悲劇收場 .
By Jeremy Lu

25. 在 React Native
經過, 路過, 也不會錯過的
坑

26. 不必要的 Render
坑

27. 我好像...舉不起來

28. 看似 ! 簡單的動作....

30. !! ( )

31. 從 Code 來看就是這樣⼦

32. ShouldComponentUpdate
ShouldComponentUpdate
ShouldComponentUpdate
很重要 !!!

33. Deep equal
or
Immutable

34. STORE
VIEW
State
Deep Equal:
1. Store 發⽣變化
2. State change
3. Connect 的 Component 觸發 ReRender
4. Deep Equal 判斷 State 內容是否相同
5. ⼀樣就不更新 (ShouldComponentUpdate
false)

35. STORE
VIEW
State
Immutable:
1. Store 發⽣變化
2. State change
3. Connect 的 Component 觸發 Refresh
4. 利⽤ === 判斷指標是否相同
5. ⼀樣就不更新 (ShouldComponentUpdate
false)

36. 簡單來說
Deep Equal ⽤的是⼤腦

37. Immutable ⽤的是
直覺

38. ListView
坑

39. 我...拿不動了

41. 問題點:
ListView 的實現⽅式
- React Native - Scroll View
- Native - Table View

42. 不同點:
- React Native - Scroll View
(不會回收 ! 不會! 不會 !)
- Native - Table View
(⾃動回收機制)

43. 78分 不能再低了

44. 解法:
⾯對它, 回收它

45. ListView
空⼼
VIEW
有內涵
的VIEW
空⼼
VIEW
有內涵
的VIEW
有內涵
的VIEW
可視範圍 範圍外範圍外

46. https://github.com/sghiassy/react-native-sglistview

47. Navigator
坑

48. Navigator的原理是
Stack!
Stack!
Stack!

49. 注意 Navigator Stack 的狀態

50. ⼀直 Push View
就會⼀直變多
直到無法控制
(此時如果加上 Store data update)
就 GG 了
87分
不能再⾼

51. 管理好 Stack
1. Main View 間的跳轉 直接切換
2. Main View -> Sub View 使⽤ Push
3. 轉/跳回 Root Page 時 清空 Stack

52. React Native
更新太快!! (好? 壞?)
坑

53. DEMO啦

54. React Native
Z > B

55. React Native Z > B
1. 不⽤怕沒有 Solution (上⾯⼀群神⼈在幫你)
2. 更新很快, 這次沒有的 Feature 下次可能就有了
3. 刻 UI 不⽤等 !!! (省太多時間了)
4. ⼀套 Code 同時開發 2 個平台 (Reuse rate ⾼達 80%)
5. 80%的問題都是 1個 solution for 2 個平台
(當然 bug 也是⼀次 2 個平台...)

56. 當然最⼤的 Z 是....

57. FED is not only for WEB,
but also for ALL TERMINALS !!!

58. 發問吧!
我可以休息了