React Native 现状调查结果已经发布,人们对 React Native 的总体感觉越来越积极,通过这些调查可以让我们了解到其生态系统中正在发生的事情!
下面是大纲:

开发者背景
回顾今年的成果,我想起了 Rick Hanlon 在 ReactConf 2021 上的演讲,他分享了 React 的"多平台"愿景;这是一个通过在每个平台上改进 React 来使 React 在每个平台上变得更好的愿景。我们正在 React Native 生态系统中看到这种趋势 --- 从 Web 到原生,从移动到桌面,在各个行业领域,以及跨越许多开发者背景。
随着行业继续模糊 Web 和原生之间的界限,我预计我们将继续看到 React Native 在更多领域的使用趋势 --- 包括在桌面等已经成熟的领域的进一步增长,以及在虚拟现实等更为新兴的领域的增长。在微软,我们相信这个"多平台"的愿景,并使用 React Native 在我们产品的广泛范围内提供高质量的体验(包括在 Xbox、Office,甚至部分 Windows 操作系统中),我们很高兴看到越来越多的应用程序也在超越移动平台。
React Native 出现之前
React Native 库的开源贡献
React Native 贡献

行业领域
你的目标是哪些移动操作系统版本?

目标平台

桌面系统

发布的应用数量
团队规模

你如何使用 React Naite?

React Native 应用用户数量排名

平台 API
在选择 React Native 作为应用技术的关键原因之一是能够访问应用程序中的原生平台API。当移动设备硬件的全部功能处于应用程序控制之下时,它可以为用户提供一些非常有用的体验。然而,创建和维护React Native的原生API包装器的技术挑战是艰巨的!如"React Native痛点"部分所述,"未维护的包"是一个持续存在的痛点。其中一个原因是创建和维护原生API包意味着需要理解Objective-C/Swift和Java/Kotlin以及新旧架构。加上一点javascript、社区管理和NPM包发布,使其更有趣,这就是很多维护者感到疲惫并放弃原生包的原因之一。作为许多原生API包的维护者,我发现总有一个库用户会遇到问题,而且永远不会有足够的PR来提供帮助 - 这是一个典型的开源困境。
多年来,在原生API包领域我看到的一件有趣的事情是社区原生API包和Expo生态系统中的包之间友好的竞争。Expo几乎为所有原生API提供了包装器,同时社区也有一个并行的包,包装了相同的API,下载量通常非常相似。乍一看,这可能看起来是资源的浪费,但实际上由于这两个包都是开源的,因此很容易重用好的想法。在2022/2023年,Expo通过其配置插件使其用户更容易使用社区包,这在实践中对react-native-firebase(一个我维护的包)等包的采用产生了重大影响,并且真正帮助应用程序开发者完成了一些仅在社区包中处理的特定需求,而Expo应用程序的典型用例则通过Expo包很好地处理。未来对原生API会带来什么?我相信2024年将是大多数模块完成转换到新架构的一年,但有一件事将保持不变:原生模块API的进展将取决于来自社区的PR和支持。因此,请对您的维护者友善,并在可能的时候提交PR。

状态管理
Redux 在 React Native 中的状态管理领域的地位已经逐渐下滑了多年。Redux Toolkit 的出现为该项目注入了新的活力,令人印象深刻的是它已经达到了 62% 的使用率。
与此同时,Zustand 是一个强大的替代方案,因为它具有熟悉的模式和微小的体积。
基于 Observable 的状态管理库,如 Jotai 和 MobX,继续拥有一个较小但充满激情的社区。这些库与基于选择器的库之间似乎存在着相当明显的分歧。 React Query 非常流行,它的活跃开发以及与其他状态管理库的兼容性使其在使用上具有优势------你不必在它和你喜欢的状态系统之间做出选择。你可以同时使用它们。 对于状态编排,XState 在兴趣(高)和使用(低)之间存在着最大的差距之一。我认为这归因于它的初始学习曲线和(必然的)冗长语法,以及与多年来建立起来的熟悉模式的偏离。然而,由于其可预测和全面的状态转换带来的显著优势,它仍然引起了大量的兴趣。 Apollo 仍然被广泛使用,但随着新的替代方案的出现,它的地位逐渐下降。它仍然是最强大的GraphQL中心状态系统。React Query 是 Apollo 的最常见替代方案,因为它更容易在不切换状态系统的情况下采用。 我的 MobX-State-Tree 继续保持着相当小众的地位,只有 13% 的使用率。值得注意的是,我们对文档和性能优化的投入将会在未来一年产生影响,这一点将会很有趣。
排名

数据获取
在 2023 年,fetch API 仍然是在 React Native 应用中检索数据的最流行 API。React-Query 和 tRPC 的使用也在增长。今年,Expo 服务器端功能的出现可能会改变数据获取解决方案的格局。最近,Expo Router v3 成为一个全栈框架,引入了 API 路由,并计划支持 React Native Server 组件。
排名

导航
2023 年的导航领域有太多令人兴奋的原因!这主要归功于生态系统中许多不同团队的协同工作,它们完美地协同合作。
首先是 Software Mansion 的工作。像 react-native-screens、react-native-reanimated 和 react-native-gesture-handler 这样的库都有了重大改进,提供了更好的共享元素过渡和自定义手势驱动动画,适用于原生导航器。
React Navigation 团队展示了他们计划在 v7 中推出的一些令人兴奋的新改进。这包括一个新的静态 API,用于更简化的开发流程。
最后,Expo Router 在二月份发布,成为了第一个适用于原生和 Web 应用的基于文件的路由器,并开启了通用应用开发的新时代。由 React Navigation 提供支持,Expo Router 可以根据 app/
目录中的文件自动生成路由、类型和深层链接。这为 React Native 带来了许多新的可能性,包括更好的代码共享与 Web、改进的错误报告、基于路由的分析、原生包分割、惰性打包、构建时优化等等。 导航领域的创新速度比以往任何时候都更快,并且没有停止的迹象!我预测 2024 年可能会为 React 并发模式在路由中带来支持,提供更好的测试解决方案,服务器路由(至少用于 Web),以及更多的原生导航原语(希望是 UISplitViewController)!
排名

样式
在 2023 年,样式库的数量翻了一番。这是否意味着开发者们仍在寻求新的方法,或者他们对当前的解决方案不满意?对于每个库来说,最重要的是要跨平台,特别是在 React Native 扩展到移动设备以外的领域,并且支持高级主题化,可以轻松地为复杂的应用程序提供样式。
StyleSheet 仍然是最广泛使用的解决方案,但也有一些新兴的明星。Tamagui 的用户数量增长了三倍,而 NativeWind 正在日益受到欢迎,因为我们喜欢使用 Tailwind 来为跨平台应用程序添加样式。在这里,我们观察到一个有趣的趋势:一些开发者终于开始摆脱 StyleSheet,并找到了他们新的首选解决方案。
我们不应忽视一些新库,比如 Unistyles、gluestack 或 Dripsy。它们每一个都承诺通过不同的 API 实现可扩展性。
总的来说,React Native 中的样式处理让创建者们感到满意。几乎有 90% 的开发者感觉积极或中立。这意味着我们,库的作者,在过去的一年里做得不错,而翻了一番的库数量最终可以满足市场的需求。
排名

UI 组件库
开发人员喜欢避免重复发明轮子和重用代码。这可能是为什么组件库始终是我们大多数人关注的热门话题之一。它们帮助我们更快地完成工作。大多数情况下。
React Native UI 库的 "三巨头": React Native Paper、React Native Elements 和 NativeBase 仍然是 React Native 开发者中最受欢迎的库。尽管与其他两者相比,Paper 的积极情绪比较多,但它不再是最受瞩目的库。
在领奖台下面,我们看到了一个新的参与者 ------ Tamagui。它的受欢迎程度和使用率迅速增长。开发者们似乎真的很喜欢它!这很可能要归功于其人体工程学 API、优化编译器为 Web 生成最小量的 CSS、大量现成主题和其创建者显著的社区存在。
NativeBase 预料中正在失去市场份额,因为它由于累积的技术债务和性能问题而被软性弃用。该团队的努力转移到了该类别的一个新参与者------gluestack-ui 上,后者专注于默认情况下最佳的组件,您可以根据自己的需要进行样式化,并在移动端和 Web 上使用。
有趣的是,尽管这些库(RN Material Kit 和 RN Material-UI)每周的下载量不到 1k,而且上次发布已经超过 4 年了,但它们仍然比例如 gluestack 等库有更多的用户,尽管这在公共注册表中并不反映出来。也许一些大型企业仍在使用它们?
超过 40% 的受访者对他们的选择感到满意,另外 40% 的人持中立态度,我对我们目前的状态感到非常满意。我期待着明年看到 Tamagui 和 gluestack-ui(也许还有其他什么?)如何颠覆现状。
排名

图形和动画
2024 年毫无疑问将是 React Native 动画的重要一年,Android 端高度期待的支持倾斜变换以及解决了已有八年之久的 bug,终于得以解决。
在去年的调查中,我预测了 Reanimated 和 Skia 的整合。这个联合如今已经结合在一起,并持续增长。我们开发的大多数新功能和改进都旨在与 Reanimated 最好地配合使用。
在图形和动画领域,Web 平台一直处于全面蓬勃发展的状态,提供了许多出色和令人兴奋的新 API。这对 React Native 开发人员来说是一个巨大的灵感来源。与此同时,我们的目标是在尽可能接近 React Native 平台的同时提供新的功能。
最近,我个人对使用 JavaScript 生成器来描述复杂的动画场景感到兴奋。在最新版本中,Reanimated 引入了对工作线程中生成器的支持...这可能会成为一种趋势...
排名

调试和性能分析
2023 年对 React Native 生态系统的调试是一个重要的一年。Expo 推出了其首个 Chrome DevTools 集成的版本,Expo和Meta合作成立了调试工作组,并宣布将默认的 Flipper 集成替换为基于 Chrome DevTools 的 React Native JS Inspector。
尽管这些更新的工作仍处于早期阶段,但看到更多平台原生调试工具的采用令人兴奋。Expo Dev Clients 允许开发人员访问应用程序的网络层,根据 2023 年 React Native 调查报告显示,这是第二常用的功能。Infinite Red 发布了 Reactotron 3.0,以帮助大型团队创建最佳的调试工作流程。Expo 和 Sentry 合作发布了 SDK 50,通过支持 Sentry 的调试 ID 标准来管理 EAS 更新的源代码映射。Software Mansion 预告了一个完整的 React Native IDE,将模拟器、项目代码、调试功能等集成到单个 vscode 实例中。此外,Expo 发布了 Expo Dev Tool Plugins,使这一调试工作流程成为 Flipper 的功能完整替代品。
我对 2024 年更加兴奋------我们将改善稳定性,扩展功能,并通过 React Native JS Inspector 统一 Expo 和 React Native 的 Chrome DevTools 体验。
调试工具

问题 - 调试工具

JavaScript 调试功能 (Chrome DevTools)

问题 - JavaScript 调试

性能分析

React Native 功能
特定功能的数据不仅反映了当前的情况,还塑造了 React Native 演进的轨迹。像代码生成、无桥接和全新架构等技术的指标真正强调了社区对创新和效率的承诺。特别值得注意的是对这些功能的积极情绪,这反映了社区的热情,并与提升开发者体验和性能的更广泛目标一致;即使在我们自己的 Microsoft 项目中,React Native Test App,我们已经在努力添加无桥接支持。
此外,与其他技术的整合以及对代码共享和 OTA 更新的重视,指向了一个未来,即 React Native 不仅是一个框架,而且是一个更大、相互连接的生态系统的基石。这反映了我们的愿望,不仅要跟上不断发展的技术风景,而且要积极塑造它,使 React Native 成为全球开发者的多才多艺和具有前瞻性的选择。
排名

其他应用方面
分析

崩溃报告

数据可视化

存储

测试

其它流行库

本地优先的应用架构
部署
2023 年的 React Native 现状调查结果显示了一个普遍的趋势:React Native 开发人员越来越倾向于使用自动化构建和部署工具来处理他们应用的构建和发布。与此同时,他们对使用 Xcode 和 Android Studio 的手动构建和分发流程的兴趣似乎在减弱。
这种转变可以归因于 React Native 开发人员希望优先考虑在他们的应用中编码和实现新功能,而不是处理将他们的多平台应用发布到应用商店的复杂性。此外,这可能受到提供定制解决方案的服务的影响,比如 EAS,旨在为 React Native 开发人员提供无缝体验,并简化 React Native 的 CI/CD 流程的设置。
通过使用自动化部署工具,开发人员和团队旨在通过将更多的时间和资源专注于功能开发来提高其生产力,而让工具为他们处理其余的工作。
排名

React Native 工具
2023 年《React Native现状调查》的结果显示出明显的趋势:React Native 开发者越来越倾向于采用 Expo CLI、EAS CLI 和 Ignite CLI 作为其首选工具来开发项目。
Expo CLI 成为开发者首选的 React Native 和 Expo 项目的通用工具。随着这种变化,我们看到对 React Native Community CLI 的兴趣减少。这两个工具都允许开发者配置项目、运行项目,并自动链接本地依赖项。
配置插件在这次调查中首次亮相,允许开发者使用连续本地生成(CNG)将本地代码包含在其中,而自定义开发客户端(expo-dev-client)允许团队在开发构建中包含本地更改。
微软的生产级工具今年也入选了,包括 React Native Test App(RNTA)和 rnx-kit。微软在 React Native 跨平台支持方面的努力为其他希望构建适用于 Android、iOS、macOS 和 Windows 的应用程序的开发者铺平了道路。
总的来说,开发者更倾向于使用能够快速入门的工具,同时还提供了逃生口,允许他们自定义应用程序特定功能的工具。
排名

React Native 的替代方案
开发者们逐渐对传统的基于 Web 的跨平台框架替代方案,如 Cordova 或 Ionic,失去了兴趣。
苹果和谷歌提出的 SwiftUI 和 Jetpack Compose 似乎在未来提供了更好的替代方案,与永恒的竞争对手Flutter并驾齐驱。
排名

资源
学习方法

Blogs, magazines & newsletters

网站、课程和书籍

播客

视频创作者

People

其他调查
评价
React Native 正在朝着正确的方向发展

目前构建 React Native 应用程序过于复杂

React Native 生态系统变化太快
React Native 的痛点

缺失的功能

React Native 优势
