为什么 2023 年还要学习 React Native
大家好，我是拭心。
最近在团队里推广 React Native 技术时， 很多人会有疑问：为什么 2023 年还要学习 React Native？考虑到星球里的小伙伴可能也有类似的问题，这篇文章我来统一回答下。
为什么要学习 React Native
在学习一项技术前，我们的确需要思考它的性价比，毕竟谁都不希望费了很大精力学习的技术没有用武之地。
在我看来最理想的技术是：市场需求大、学习成本低、长期有价值。
React Native 在一定程度上满足这三点。
市场需求
根据 QuestMobile 的统计数据，2023 年 6 月中国移动互联网用户规模已达 12.13 亿，移动设备仍然是最大的流量入口，也就是说，运行在手机上的 app 需求量还是很大。
在追求成本和效率的今天，很多公司会使用 React Native 作为 app 开发的技术方案，这是因为 React Native 可以解决 Android/iOS 原生技术开发成本高和迭代发版慢的问题。
截止 2023 年 8 月，国内至少有以下这些知名公司在使用 React Native：
- 美团（美团、大众点评）
- 携程（携程旅行、Trip）
- 快手
- 阿里（菜鸟）
- 喜马拉雅
- 爱奇艺
- 小红书
- 微信读书
- 京东
- OPPO（OPPO 商城）
- 小米（小爱音箱）
- 华为（智慧生活）
- 大疆（大疆商城）
- 安居客
- 得物
- 肯德基
- 必胜客
- 浦发银行
- 叮咚买菜
- 智行火车票
- 去哪儿
- 58 同城
- 网易云音乐
- 下厨房
- 电信（小翼管家）
- 联通（联通智家）
- 汽车之家
想了解全球使用 React Native 的应用可以查看： https://reactnative.dev/showcase
因此我们可以得知，React Native 的市场需求还是不小的。
学习成本
React Native 正如其名，是使用 React 语法开发、运行时调用 Android/iOS Native 视图进行渲染的跨平台框架。和 React Web 相比，它的主要区别是 UI 组件和渲染方式有所不同，语法和框架基本相似。
不像其他跨端框架的陡峭学习成本，React Native 的上手成本很低，掌握 JSX 语法和常用的组件即可开发业务。此外项目开发中使用的三方库很多都来自 React 社区。
如果是有经验的 React 开发者，只需要花很少的时间学习 React Native 特殊的一些 API 即可上手；如果是客户端开发，学习 React 基本概念和常用组件后就可以上手开发，速度也很快；如果是熟悉面向对象语言的开发者，可以选择 TypeScript 作为开发语言，由于 TypeScript 的强类型性，掌握面向对象语言的开发者可以很快的掌握它，这样都不需要了解 JS。
职业发展的价值
除了需求大和成本低，掌握 React Native 还有这些价值：拓宽能力边界，承接更多业务。
拓宽能力边界，是指掌握 React Native 后可以具备更多领域的开发能力。React Native 是一个横跨前端和客户端的技术。对于客户端开发，学习 React Native 的过程其实就是在学习前端开发技术，掌握以后可以具备前端开发的基本能力，有助于开启职业第二曲线。
承接更多业务，是指掌握 React Native 后可以承接更多类型的业务需求。在 app 业务为主的公司里，不会 React Native 的前端只能开发管理后台或者 H5 活动，处于业务边缘。而由于 React Native 的高性能，它会被用在更核心的业务上，因此掌握 React Native 就可以承接更多核心业务需求，逐渐成为业务核心开发。
以上就是学习 React Native 的理由：市场需求较大、学习成本低且学完有助于职业发展。
React Native 的技术优势
前面我们知道国内外有很多公司使用 React Native 开发 app 业务，那问题来了，为什么这些公司会选择 React Native 呢？它有什么优势？
总的来说，React Native 有这些优势让它脱颖而出：
- 支持跨端
- 可以热更新
- 性能比较好
- 开源库较多
支持跨端
对于很多公司来说，产品需求需要在 Android/iOS 两个平台分别开发一遍成本有点高，除了两倍的人力成本，还有开发速度慢、容易出问题（UI 和逻辑都需要开发两次）等问题。
“跨端”即“一套代码多端运行”是 React Native 的核心优势，也是各公司选择它的主要原因。
“跨端”的核心目的是磨平不同平台的差异，开发一次就能运行在多个平台。使用 React Native 开发的代码，会在运行时被 React Native 框架映射成平台相关的代码，从框架层屏蔽了平台之间的差异。
支持跨端的方案有 H5、DSL、Flutter 等，和他们相比 React Native 主要在“高性能”和“热更新”上更胜一筹。
高性能
在 React Native 诞生（2015 年）之前，业内广泛使用的跨端技术是：使用 WebView 加载 HTML。这个方案的好处是 app 只需要提供 WebView 容器，业务代码都可以用 H5 实现，但缺点也很明显，这种混合应用的性能非常差，用户体验不好。
React Native 和 WebView + H5 方案最大的区别在于，在运行时是通过平台相关的代码进行渲染，也就是说，你写的 React Native 组件代码，在 Android 平台上运行时会被映射为 Android UI 组件，在 iOS 上也是同理。使用平台相关的组件进行渲染自然比完全使用浏览器要流畅。
另外 React Native 从 0.63 版本（iOS 0.64）开始支持 Hermes 引擎，这是一种性能更强大的JS 引擎。它可以在编译时把 JS 代码编译成平台相关的字节码（也就是说会针对 Android/iOS 平台分别做代码优化），这样可以提升运行时的性能，同时代码的体积也会更小。
更让人兴奋的是， React Native 从 0.68 版本 开始引入了性能更好的新架构。
新架构的核心优势是：
- 通信方式优化，支持 JS 代码和原生代码同步调用，性能更好
- TurboModules 支持按需加载，提升启动速度
- Fabric 渲染管理性能更好，也支持旧的 Native 组件，升级成本低
因此，在渲染方式、Hermes 引擎和新架构的多种特性加持下，React Native 的性能可以接近原生开发，对于用户来说基本感受不到和原生的差异。
热更新
除了高性能，React Native 还有一个重磅优势：支持热更新，业务更新不需要等客户端发版。
随着工信部对移动应用的合规管理越来越严格，原生 app 从发布到审核通过、到用户升级需要的时间越来越久，这带来的问题是：产品迭代速度被拉慢、线上问题修复速度不够及时。对于开发者来说，经常出现为了某个紧急需求赶上发版时间熬夜加班，苦不堪言。
React Native 可以解决这个问题，核心在于它的入口代码可以在运行时修改。
React Native 编译后的代码可以简单理解为一个 JS 文件，它由 app 内置或者下载到手机上并在运行时进行加载。
要实现热更新，我们只需在 app 启动后向服务端获取当前最新的 React Native JS 文件包，当发现有新包发布时立刻下载更新。在用户点击时打开最新的 JS 文件，这样新代码就生效了。
因此，使用 React Native 开发的业务可以像 H5 发布那样立刻生效，不需要经过应用市场审核、用户点击升级这个长周期。这对于需要快速验证、抢占市场先机的业务至关重要。
适合使用 React Native 的业务场景
以上就是 React Native 的技术优势，需要注意的是，React Native 也不是完美的，它有这两个缺点：
- 引擎初始化较慢
- JS 与 Native 通信消息过多时可能会拥堵
由于 React Native 代码的执行依托于 JavaScript 引擎，因此在执行 React Native 代码之前必须先创建引擎，这一步在部分性能较差的手机上可能会花费几十上百毫秒。因此 React Native 不适合用在启动后立刻就要使用的场景，除非业务上能接受短暂的白屏。
另外在旧架构上，JS 与 Native 通信需要经过多个线程中转，如果消息特别多的话可能会出现后面的消息没有被及时执行的情况。因此 React Native 不适合用在页面刷新特别频繁的场景，比如直播间、游戏等。
如果是首页，一般使用原生技术，加载速度更快，不会白屏；如果是活动页这种性能要求不高的场景，一般使用 H5，开发速度更快；如果是逻辑简单纯展示，用 DSL（领域特定语言，即公司内部约定的语法规则）也可以实现。
剩下的其他场景都适合使用 React Native 实现，即二级页面、性能要求高、逻辑交互复杂的场景。
总结
好了，这篇文章到这里就结束了，我们来总结一下。
2023 年移动互联网已经进入下半场，“降本增效”成为大小公司常提的话题，React Native 支持跨端、性能好、可以热更新的技术优势非常契合这个时期的市场需求，因此值得对 app 跨端开发感兴趣的人学习。
另外值得一提的是，华为最近公布的鸿蒙新系统也宣布支持 React Native，也就是说在未来的“三端时代”，React Native 是唯一支持所有移动系统的跨端技术，非常值得期待！
看完这篇文章你是否对 React Native 有更多的了解呢？欢迎留言反馈。
