react native redux_sharing
TRANSCRIPT
REACT NATIVE / REDUX 簡單 也 不簡單
SAM LEE
Sam Lee : FED : /
react-native init AwesomeProject
React 是什麼?
React JS
VDOMWEB
COMPONENT
React Native 又是什麼?
React Native
VDOM NATIVEOBJECT
iOSAndroid
WindowsTizen
OSXQT
VR
React Native 的原理是?
!!!!!!!
ReactJS
NativeFunction
JavascriptCore
Javascript Bridge
RCTBridge
Obj-C bridge
- 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
什麼是 Redux ?
Object: Action: Object:
State: State:
React Native Redux
+
Mobile 常⾒的 UI 結構
Redux Provider
Navigator
AUTH NAVIGATOR
MAIN Navigator
SUB NAVIGATOR
SUB NAVIGATOR
SUB NAVIGATOR
NAVIGATOR MAIN VIEW
SUB NAVIGATOR
COMPONENT
基本架構
Redux 很⽅便
但不能濫⽤ Connect
NAVIGATOR MAIN VIEW
SUB NAVIGATOR
COMPONENTConnect with Store Connect with Store
Connect with Store
Connect with Store
資料的傳遞
NAVIGATOR MAIN VIEW
SUB NAVIGATOR
COMPONENTConnect with Store Connect with Store
Connect with Store
Connect with Store
Update Update
Update
Update
Dispatch Action
Dispatch Action
Dispatch ActionDispatch Action
資料的傳遞
NAVIGATOR MAIN VIEW
SUB NAVIGATOR
COMPONENTConnect with Store
props
propsConnect with Store
Update UpdateDispatch Action
資料的傳遞
Dispatch Action
Update
Update
專案最後都會搞⼤, 如果⼀開始⼿法單純, 將來還有機會控制, 反之, 則必然悲劇收場 .
By Jeremy Lu
在 React Native經過, 路過, 也不會錯過的
坑
不必要的 Render
坑
我好像...舉不起來
看似 ! 簡單的動作....
!! ( )
從 Code 來看就是這樣⼦
ShouldComponentUpdate ShouldComponentUpdate ShouldComponentUpdate
很重要 !!!
Deep equal or
Immutable
STORE
VIEW
State
Deep Equal:
1. Store 發⽣變化
2. State change
3. Connect 的 Component 觸發 ReRender
4. Deep Equal 判斷 State 內容是否相同
5.⼀樣就不更新 (ShouldComponentUpdate false)
STORE
VIEW
State
Immutable:
1. Store 發⽣變化
2. State change
3. Connect 的 Component 觸發 Refresh
4.利⽤ === 判斷指標是否相同
5.⼀樣就不更新 (ShouldComponentUpdate false)
簡單來說
Deep Equal ⽤的是⼤腦
Immutable ⽤的是
直覺
ListView
坑
我...拿不動了
問題點:
ListView 的實現⽅式
- React Native - Scroll View
- Native - Table View
不同點:
- React Native - Scroll View (不會回收 ! 不會! 不會 !)
- Native - Table View (⾃動回收機制)
78分 不能再低了
解法:
⾯對它, 回收它
ListView
空⼼VIEW
有內涵的VIEW
空⼼VIEW
有內涵的VIEW
有內涵的VIEW
可視範圍 範圍外範圍外
https://github.com/sghiassy/react-native-sglistview
Navigator
坑
Navigator的原理是Stack!Stack!Stack!
注意 Navigator Stack 的狀態
⼀直 Push View 就會⼀直變多直到無法控制
(此時如果加上 Store data update)就 GG 了
87分
不能再⾼
管理好 Stack
1. Main View 間的跳轉 直接切換
2. Main View -> Sub View 使⽤ Push
3. 轉/跳回 Root Page 時 清空 Stack
React Native更新太快!! (好? 壞?)
坑
DEMO啦
React NativeZ > B
React Native Z > B
1.不⽤怕沒有 Solution (上⾯⼀群神⼈在幫你)
2.更新很快, 這次沒有的 Feature 下次可能就有了
3.刻 UI 不⽤等 !!! (省太多時間了)
4.⼀套 Code 同時開發 2 個平台 (Reuse rate ⾼達 80%)
5. 80%的問題都是 1個 solution for 2 個平台(當然 bug 也是⼀次 2 個平台...)
當然最⼤的 Z 是....
FED is not only for WEB, but also for ALL TERMINALS !!!
發問吧! 我可以休息了