扣丁书屋

Flutter正在悄悄击败React-Native

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这种来命令,而不是大小写

https://mp.weixin.qq.com/s/Hv3ScmfUiOkesnEjEl0HPw

深入 React 函数组件的 re-render 原理及优化

发布于:8月以前  |  333次阅读  |  详细内容 »

手写系列-实现一个铂金段位的 React

发布于:8月以前  |  277次阅读  |  详细内容 »

如何写出更优雅的 React 组件 - 代码结构篇

发布于:8月以前  |  313次阅读  |  详细内容 »

React 精品组件:mac-scrollbar

发布于:8月以前  |  302次阅读  |  详细内容 »

React 精品组件:mac-scrollbar

发布于:8月以前  |  321次阅读  |  详细内容 »

React 18 Beta 来了

发布于:8月以前  |  392次阅读  |  详细内容 »

手把手教你写一个 React 状态管理库

发布于:9月以前  |  312次阅读  |  详细内容 »

如何将 React 应用程序加载时间减少 70%

发布于:9月以前  |  337次阅读  |  详细内容 »

React 18 新特性之 startTransition

发布于:9月以前  |  338次阅读  |  详细内容 »

Reaction Engines成立新合资公司以打造紧凑、轻质的氨反应器

英国的Reaction Engines公司已经宣布成立一家合资企业以打造紧凑、轻质的氨反应器。这家公司表示,这种反应器可以用于航运和离网能源发电等困难行业的脱碳,并且还可以用于航空。

发布于:9月以前  |  385次阅读  |  详细内容 »

你不知道的 React 最佳实践

发布于:9月以前  |  287次阅读  |  详细内容 »

这才是 React Hooks 性能优化的正确姿势

发布于:9月以前  |  320次阅读  |  详细内容 »

所属标签

最多阅读

如何有效定位Flutter内存问题? 1年以前  |  11917次阅读
Flutter的手势GestureDetector分析详解 3年以前  |  7926次阅读
Flutter插件详解及其发布插件 3年以前  |  6598次阅读
在Flutter中添加资源和图片 3年以前  |  5370次阅读
Flutter 状态管理指南之 Provider 3年以前  |  4551次阅读
发布Flutter开发的iOS程序 3年以前  |  4520次阅读
Flutter for Web详细介绍 3年以前  |  4389次阅读
在Flutter中发起HTTP网络请求 3年以前  |  4175次阅读
使用Inspector检查用户界面 3年以前  |  4070次阅读
Flutter Widget框架概述 3年以前  |  3426次阅读
Flutter路由详解 3年以前  |  3291次阅读
为Flutter应用程序添加交互 3年以前  |  3187次阅读
JSON和序列化 3年以前  |  3176次阅读
Flutter框架概览 3年以前  |  3140次阅读
推荐5个Flutter重磅开源项目! 2年以前  |  3072次阅读
使用自定义字体 3年以前  |  2993次阅读
处理文本输入 3年以前  |  2982次阅读
编写国际化Flutter App 3年以前  |  2973次阅读

手机扫码阅读