一、React的世界觀1、通過改變state來改變視圖視圖不用考慮如何改變自己,把state畫出來即可。2、變數不可變通過創建一個新的state來更改state,使得變更可追蹤,不容易因為其他部分修改state導致不可預測的錯誤3、結構與樣式分離參考了CSS的做法,RN的style機制使得代碼更清晰 ...
一、React的世界觀
1、通過改變state來改變視圖
視圖不用考慮如何改變自己,把state畫出來即可。
2、變數不可變
通過創建一個新的state來更改state,使得變更可追蹤,不容易因為其他部分修改state導致不可預測的錯誤
3、結構與樣式分離
參考了CSS的做法,RN的style機制使得代碼更清晰更易維護
4、採用消息替代調用
組件直接不直接調用,使得組件間松耦合,便於維護和團隊開發
二、為什麼使用React Native?
1、熱更新
開始只是為了能夠熱更新,並且性能還能接受
2、模塊化
更好重用和擴展
3、跨平臺
業務邏輯可以重用,不同平臺的組件各自實現
4、統一的佈局方式
三、設計與分工
1、組件樹設計
公共組件
React
2、狀態樹設計
公共狀態
redux
3、路由設計
Tabview+Navigator+Model
react-native-router-flux
4、分工
按組件劃分
Git Flow
四、RN與原生雙向調用
植入友盟監控
原生讀遠程配置
五、頁面跳轉
1、Tabview
2、Navigator
3、Modal
4、ExNavigator+Redux
https://github.com/aksonov/react-native-router-flux
六、多屏適配
1、彈性佈局能滿足正常開發需求
滿足網格佈局標準就滿足正常開發需求
2、彈性傳遞或上一層有大小
3、圖片尺寸
PixelRatio.getPixelSizeForLayoutSize
4、彈性斷層
Dimensions.get('window').height
七、Redux
1、業務邏輯與界面分離
更適合跨平臺項目
2、State變化可預測
便於調試,重現bug
3、只有一個狀態樹
隨時還原案發現場
4、減少重畫次數
用setState會產生重畫,而redux合併狀態再重畫
八、熱更新
發佈時內置RN文件
啟動時檢查
有更新則自動下載更新,並提示用戶安裝更新
更新後的RN替換本地文件
https://github.com/Microsoft/react-native-code-push
九、調試與調優
1、Chrome調試
2、React-addons-perf
Perf.start() and Perf.stop()
Perf.getLastMeasurements()
3、Console.log
更多精彩內容,請加入我們的開發實戰經驗交流QQ群:163520523,會有意想不到的驚喜等著您!
————————————————