flutter react 分析

1.比較

https://juejin.im/post/5b0607c76fb9a07a9b365556

如上表所示,React Native和WEEX採用的技術方案大體相同,它們都使用JavaScript來開發跨平臺應用,通過將中間層轉換爲原生的組件後再利用原生的渲染引擎執行渲染操作。與React Native和WEEX使用原生平臺渲染引擎不同,Flutter直接使用Skia引擎來渲染視圖,和平臺沒有直接的關係。就目前跨平臺框架的實現技術來看,JavaScript在跨平臺應用開發中可謂佔據半壁江山,大有“一統天下”的趨勢。

從性能方面來看,Flutter理論上是最好的,React Native和WEEX次之,並且都好於傳統的WebView方案。但從目前的實際應用來看,它們之間卻並沒有太大的差距,特別是和0.5.0版本以上的React Native對比,性能體驗上的差異並不明顯。

而從社羣和社區角度來看,React Native和Flutter無疑是最活躍的,React Native經過4年多的發展已經成長爲跨平臺開發的實際領導者,並擁有各類豐富的第三方庫和大量的開發羣體。Flutter作爲新晉的跨平臺技術方案,目前還處測試階段,商用的案例也很少。不過,谷歌的號召力一直很強,未來究竟如何發展讓我們拭目以待。

https://mp.weixin.qq.com/s/9wU5ssUzESW2k2zhMTbBaw

2.flutter官網

https://flutterchina.club/get-started/install/

https://flutter.cn

3.rn官網

https://reactnative.cn/

//上面網站可能沒法獲取代碼圖片,可以訪問下面網站,就是需要翻牆

https://facebook.github.io/react-native/docs/props

4.rn學習資料

https://blog.csdn.net/super_man_ww/article/details/79419477

5.rn 現狀

RN開發有兩種模式,一是原生Android/IOS混合起來的開發(這種開發目前在國內,從事的比較多),二是CRNA(create react native app)模式開發,也就是利用腳手架生產項目模板。【國內市場對CRNA模式開發不成熟】

IOS

必須安裝的依賴有:Node、Watchman 和 React Native 命令行工具以及 Xcode。

雖然你可以使用任何編輯器來開發應用(編寫 js 代碼),但你仍然必須安裝 Xcode 來獲得編譯 iOS 應用所需的工具和環境。

ANDROID

必須安裝的依賴有:Node、Watchman 和 React Native 命令行工具以及 JDK 和 Android Studio。

雖然你可以使用任何編輯器來開發應用(編寫 js 代碼),但你仍然必須安裝 Android Studio 來獲得編譯 Android 應用所需的工具和環境。

6.rn 項目結構

src
    component  
//組件
    dao        
//數據處理
    res        
//靜態資源
    router     
//路由
    view       
//視圖
        home     //界面1
        order    //界面2
        self     //界面3

7.rn學習項目

https://www.cnblogs.com/gooder2-android/p/9087884.html

8.flutter 現狀

必須安裝插件:flutter dart

ANDROID

Flutter 依賴 Android Studio 的全量安裝來爲其提供 Android 平臺的支持。但你也可以使用其他的編輯器來寫 Flutter 應用

WEB

Web 平臺的 Flutter 目前處於技術預覽期,在 Web 平臺運行 Flutter 應用時候,可能出現一些不可預料的崩潰或功能缺失。

必須 安裝 Chrome 瀏覽器

IOS

開發 iOS 平臺上的 Flutter 應用,你需要一個安裝了 Xcode 9.0 或者更高版本的 Mac 設備

9.flutter android

view  對應    Widget

Widget 和 View 還是有一些差異。首先,Widget 有着不一樣的生命週期:它們是不可變的,一旦需要變化則生命週期終止。任何時候 Widget 或它們的狀態變化時,Flutter 框架都會創建一個新的 Widget 樹的實例。對比來看,一個 Android View 只會繪製一次,除非調用 invalidate 纔會重繪

 XML 文件定義佈局   對應    通過一個 Widget 樹

Activity Fragment    ——    Flutter 中的界面都是以 Widget 表示的

生命週期   ——   可以通過綁定 WidgetsBinding 觀察者並監聽 didChangeAppLifecycleState() 的變化事件來監聽生命週期

LinearLayout ——   Row or  Column

ScrollView ——  ListView Widget

SQLite  ——   SQFlite 插件

10.flutter 項目

https://github.com/flutter/samples/blob/master/INDEX.md

20個開源項目

https://www.jianshu.com/p/72e359bfe1e0

11.flutter項目結構解析

https://www.jianshu.com/p/7176e3d37b55

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章