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 !!!

發問吧! 我可以休息了