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

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