关于javascript:Flutter正在悄悄击败ReactNative

36次阅读

共计 2326 个字符,预计需要花费 6 分钟才能阅读完成。

React-Native 与 Flutter

事件是这样的,因为最近想做个 APP,于是我思考下技术选型,便在 gitHub 看了看,于是发现了一个让我诧异的点:

React-native仓库

Flutter仓库

能够看到,FLutterStar 数量默默的大幅超过了React-Native

感觉近期社区对于 React-native 和 Flutter 缓缓升高了关注度,很少有人写相干性质的文章了

比照招聘热度

  • React-Native:

    • 通过 Boss 直聘的 url 传参测试,深圳地区的 React-Native 招聘数量为 9 页

      https://www.zhipin.com/c101280600/?query=react-native&page=9&ka=page-9

  • Flutter:

    • 通过 Boss 直聘的 url 传参测试,深圳地区的 Flutter 招聘数量为 8 页

      https://www.zhipin.com/c101280600/?query=Flutter&page=8&ka=page-8

招聘热度:并驾齐驱


大厂招聘

  • react-native

  • Flutter

  • 两者并驾齐驱

gitHub 生态

  • react-native 关键字搜寻:259K 的仓库数量

  • flutter 关键字搜寻:275K 的仓库数量

  • 说 react-native 生态比 flutter 成熟很多的同学们要留神,可能这句话目前要打个问号了

我的综合思考

  • 学习 flutter 的老本在于应用 dart 语言, 其实老本也不算很高,只是放在我身上去学习,性价比不高
  • flutter 的国内标杆产品在周边敌人反馈普遍存在一些体验上和交互上、兼容性的问题
  • 因为须要疾速兑现试错,最终抉择 react-native 作为技术栈选型

    在一个产品初期,应该疾速兑现产品需要,看市场响应如何再做下一步的打算

react-native 环境搭建(mac 电脑)

  • 筹备工作

    brew install node
    brew install watchman
    npm install -g yarn
    yarn config set registry https://registry.npm.taobao.org/
  • 电脑装置 xcode
  • 电脑装置模拟器

    sudo gem install cocoapods
  • 初始化我的项目

    npx react-native init AwesomeProject
  • 启动我的项目

    cd AwesomeProject
    yarn ios
  • 如果中途遇上 homebrew 在 updating…,百度下能够找到解决办法,搭建环境还是很快的,就是执行 pod install 时候记得要开梯子
  • 这样一个简略的 react-native 我的项目就搭建好了

    如果遇到环境上的问题能够公众号后盾或者微信私聊我

学习 flutter 的正确姿态

  • 官网:

    https://flutterchina.club/
  • Mac 环境装置

    https://flutterchina.club/setup-macos/
  • 按文档实操(有些大佬吐槽文档烂,可是恰好反馈出一个点,阐明大佬也看了文档,而且都认真看了,所以小白更应该认真看,不然怎么晓得烂?)

两者的区别

  • 这篇文章就写得很好,两者的区别,这里搬一些过去,就不反复写了, 如果要深度比照,可能又是一个简明扼要
https://www.jianshu.com/p/da80214720eb
  • 数据的一些比照:

  • 原理的比照(最重要):

    • React Native 是一套 UI 框架,默认状况下 React Native 会在 Activity 下加载 JS 文件,而后运行在 JavaScriptCore 中解析 Bundle 文件布局,最终重叠出一系列的原生控件进行渲染。
    • 简略来说就是 通过写 JS 代码配置页面布局,而后 React Native 最终会解析渲染成原生控件,

  • Flutter 中只需平台提供一个 Surface 和一个 Canvas,剩下的 Flutter 说:“你能够躺下了,咱们来本人动”。
  • Flutter 中绝大部分的 Widget 都与平台无关,开发者基于 Framework 开发 App,而 Framework 运行在 Engine 之上,由 Engine 进行适配和跨平台反对。这个跨平台的反对过程,其实就是将 Flutter UI 中的 Widget“数据化”,而后通过 Engine 上的 Skia 间接绘制到屏幕

  • 剩下的请看下面举荐的文章

尽管我选了 React-native, 然而你们不肯定

  • 以前的我很排挤 Flutter,然而事到如今,咱们用数据谈话,它曾经被公众承受,而且可能范畴比 react-native 更广,如果条件容许,你们能够应用 flutter

顺便说一点

  • 不要学我,看我整篇文章 react-nativeflutter一会大些一会驼峰,要标准命名(次要是 Mac 键盘难用你们懂的~)
  • 如果不标准大小写命名,就会遇到上面这个状况
  • 我曾经遇到很多共事和粉丝问我,为什么我在本地构建没问题,一上服务器就失败,找不到文件名啊~ 那是你大小写不标准,不同操作系统的规定不一样,最终构建的后果也不一样,所以举荐应用 react-native 这种来命令,而不是大小写

    题外话

  • react-native 和 flutter 的争斗可能要进入到 vue 和 react 这样的 pk 级别了
  • 上周的公众号投票,将近 400 人投票, 最终 react 渺小的劣势获胜,这阐明两个框架国内都用得很多,尽管我是 react 的疯狂爱好者,然而我也喜爱 vue 的作者,这并不抵触

    看完两件事

如果你感觉这篇内容对你挺有启发,我想邀请你帮我几件小事

1. 点个「在看、赞、关注」,让更多人也能看到这篇内容(点了「赞」,bug -1 😊)

2. 关注我的公众号「前端巅峰」,让我继续为你推送精选好文

我是 Peter 谭, 一位小厂前端开发工程师,喜爱搞架构,对性能优化,跨平台开发有肯定钻研,还喜爱做自媒体,区块链。欢送关注我

正文完
 0