React-Native与Flutter

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

React-native仓库

Flutter仓库

能够看到，FLutter的Star数量默默的大幅超过了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 nodebrew install watchmannpm install -g yarnyarn config set registry https://registry.npm.taobao.org/
  • 电脑装置xcode

  • 电脑装置模拟器

    sudo gem install cocoapods

  • 初始化我的项目

    npx react-native init AwesomeProject

  • 启动我的项目

    cd AwesomeProjectyarn 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-native和flutter一会大些一会驼峰，要标准命名（次要是Mac键盘难用你们懂的～）
  • 如果不标准大小写命名，就会遇到上面这个状况

  • 我曾经遇到很多共事和粉丝问我，为什么我在本地构建没问题，一上服务器就失败，找不到文件名啊～ 那是你大小写不标准，不同操作系统的规定不一样，最终构建的后果也不一样，所以举荐应用react-native这种来命令，而不是大小写

    题外话

  • react-native和flutter的争斗可能要进入到vue和react这样的pk级别了

  • 上周的公众号投票，将近400人投票,最终react渺小的劣势获胜，这阐明两个框架国内都用得很多，尽管我是react的疯狂爱好者，然而我也喜爱vue的作者，这并不抵触

    看完两件事

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

1.点个「在看、赞、关注」，让更多人也能看到这篇内容（点了「赞」，bug -1 ）

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

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