Mahesh Haldar 原作,授权 New Frontend 翻译。
React Native 对移动端应用开发而言是一场革命,使用过 Phone-gap、Ionic 或其他基于 Web 的移动端应用开发框架的开发者,大概感受尤为深刻。
如果你的目标是开发一个可扩容、可维护的生产环境应用,那么仅仅使用 React Native 本身恐怕不够。配置项目时,需要引入大量开源社区创建的 npm 包,这样可以加速推进开发。
这篇文章会讨论一些库和工具。配置你的下一个 React Native 项目时,它们值得考虑。我希望这篇文章能帮助你做出决策。
1. React Native 基础框架
React Native 建议使用 Expo CLI 或 React Native CLI 创建项目。这两个工具各有千秋:
Expo CLI
- ✅迅速上手,很快就可以开始写代码了。
- ✅应用的分发和安装都很迅捷。
- ✅很适合 demo 或者概念验证项目。
- 🔴应用尺寸会增加 20 到 25 MB。
- 🔴长期项目不推荐使用。参见 Expo CLI 官方文档列出的限制。
- 🔴不支持编写原生代码。不过,在 React Native 项目中还是可以调用 Expo API 的。
React Native CLI
- ✅方便加入 Android 和 iOS 原生代码。
- ✅适合大项目。
- 🔴分发、安装应用不那么容易。
- 🔴需要一台 Mac 做 iOS 开发。
2. 静态类型
身为 JavaScript 开发者,我慢慢感到自己写的代码需要静态类型。静态类型检测有助于更早发现错误,提高代码可读性。
TypeScript
TypeScript 号称 JavaScript 的超集,提供了许多语法糖。
- ✅社区很庞大。TypeScript 广泛用于各种前后端框架。
- ✅比 Flow 更快。
- 🔴React 支持稍逊 Flow。
Flow
Flow 并不是一门编程语言,只为 JavaScript 提供了静态类型检测。
- ✅React 支持更佳。
- 🔴Facebook 有从 Flow 转移到 TypeScript 的趋势。
- 🔴较小的社区。
- 🔴文档不那么丰富。
3. HTTP 请求客户端
你的应用多半需要调用 API,因此,你需要一个 HTTP 客户端:
Axios
- ✅久经考验的经典库。
- 🔴如需调用 GraphQL API,需要另找一个库。
GraphQL Apollo 客户端
- ✅同时支持调用 REST API 和 GraphQL API。
- ✅开箱即用的缓存功能。
- 🔴生产环境应用使用率不高。
4. 可复用 UI 组件的管理
尽可能地复用代码,构建容易维护的代码库,保持用户界面的一致性,这些需求意味着我们需要寻找基于云组件的管理方案。
Bit.dev
- ✅持续发布组件。
- ✅从任意仓库便捷地引入、安装组件。
- ✅在同一个地方组织管理组件,为其编写文档。
- ✅出色的 React Native 支持。
5. 单元测试配置
应用想要稳定,良好的单元测试不可或缺。
Jest 搭配 enzyme
- ✅十分简单易用的测试框架。
- ✅Jest 还可以配合 TypeScript、Node、React、Angular、Vue 等使用。
- ✅内置 mocking 功能。
- ✅庞大的社区。
6. 状态管理
如果是长期项目或者规模较大的项目,那么你需要更好的策略管理状态,以及在组件间共用状态。我推荐以下选项:
Redux
- ✅庞大的社区,丰富的模式,经过了生产环境的充分考验。
- ✅时间旅行功能在开发和调试阶段非常好用。
- 🔴性能不如 Mobx 之类的状态管理库那么好。
Mobx
- ✅性能更好。
- 🔴扩容能力不如 Redux。
- 🔴不太适合复杂的大型项目。
Hook 和 Context API
Redux 内部使用了 Context API。Context API 曾经是实验性 API,不过在 React v16.4+ 后已经正式发布。所以我们可以直接使用 Hook 和 Context API,避免依赖 Redux 这个库,这样也能减少应用尺寸。这样做利弊如下:
- ✅无需引入额外的依赖,有助于减少应用尺寸。
- 🔴需要规划,也要求团队成员都遵循一致的规范。
7. 导航
多页面(screen)应用需要我们定义方便扩容、易于维护的路由和导航。
React Navigation
- ✅庞大的社区。
- ✅覆盖了大多数常见的使用场景,包括基于名称(name-based)的路由、从路由传递信息、标签页导航、鉴权流程、深链(deep linking)、统计分析触发器等。
- ✅你也可以使用预定义的 React 导航 hook。
8. 表单
React 的原生表单写起来不爽,就我个人而言,大多数场景下直接编写 React 表单都很别扭。因此我们需要寻找更容易编写和维护,对开发者更友好的方式。
Formik
- ✅庞大的社区。
- 🔴性能不如 react-hook-form。
React Hook Form
- ✅性能比 Formik 好。
- ✅基于 hook,因此对开发者更友好,也更容易使用。
- 🔴社区比较小。
9. 配置加载
开发复杂大型项目时,我们希望项目可以适用各种环境,容易扩容,支持持续部署,这就需要一个配置加载框架。
10. 国际化(i18n)
React Context API
- ✅直接使用 React 内置的 Context API。
- ✅用起来很简单。
- 🔴单复数、阴阳性之类的高级特性需要定制。
react-i18next
- ✅社区庞大,使用广泛。
- ✅特性丰富(例如单复数、阴阳性)。
- 🔴因为这是一个第三方库,所以相比内置的 Context API,会增加应用尺寸。
11. 应用动态更新
React Native 的架构允许我们将问题修复和更新直接送达用户(热更新),也就是说不需要经过打包,发布到应用商店,等待用户更新应用的流程。可以使用微软的 CodePush 服务。
12. 应用统计分析
统计分析很重要,可以让我们了解、监测客户行为。大多数场景下,使用 Firebase Google Analytics 就可以满足基本需求。如果你需要技术支持,或者有一些特殊的需求,例如分析广告及其到达率,基于营销渠道的统计分析等,可以考虑 CleverTap、Appsflyer、mixpanel 这些付费方案。
13. 故障报告分析
Firebase Crashlytics
Google 收购了知名的故障分析工具 Fabric,现在称为 Firebase Crashlytics。这个免费服务向你提供精美的故障报告。Firebase 也集成了 Slack 支持,故障发生时你能收到实时通知。
14. 测试应用分发平台
大多数时候,在发布到应用商店之前,我们需要先把应用分发给团队成员和一些客户,这样可以收到一些早期的反馈。
Firebase
- ✅免费,附带许多 Google 服务,包括故障分析、统计分析、OCR,等等。
- 🔴配置、发布应用可能需要较长时间。
- 🔴目前处于 beta 阶段。
App Center
- ✅免费分发,附带故障分析和统计分析服务。
- 🔴配置、发布应用可能需要较长时间。
TestFairy
- ✅面向企业用户,包含技术支持。
- ✅有一些酷炫的特性,比如摇一摇设备报 bug(会在 Jira 创建一个工单)。
- ✅自动录制视频,记录触发崩溃、问题的用户使用流程。
- 🔴需要付费使用。(译者注:有比较受限的免费试用选项。)
15. 应用自动签名和发布
任何大型团队都应该自动化应用的签名、发布流程,这可以节约大量时间,也能避免很多人为失误。
自建
你可以考虑使用 Fastlane 这样的开源工具来自动化签名、构建 apk 和 ipa 文件的流程。然后将应用发布到上一小节提到的那些平台。
- ✅自行掌控,节约费用。
- 🔴需要大量时间配置。
- 🔴端到端配置需要专门技能和知识。
- 🔴构建 ipa 文件需要在 CircleCI 或 Travis 上运行相应流程,或者在自己的 Mac mini 机器上跑。
Bitrise
构建、发布应用最简单和迅捷的方式之一。
- ✅快速配置。
- ✅无缝集成 Firebase、Slack 及其他平台。
- ✅基于 Fastlane。
- ✅构建 Android 和 iOS 应用的一站式解决方案。
- 🔴需要付费。(译者注:有比较受限的免费选项,不过只适合业余项目。)
本文就到此为止了,我希望这篇文章对你有所帮助。
如果你发现我在优劣对比部分漏掉了值得一提的内容,请给我留言。
如果有更好的工具或库推荐,也欢迎留言。
持续学习,持续应对。(译者注:「持续应对」原文是 keep on Reacting,双关。)
如果这篇文章对你有帮助,那么你可以考虑请我喝杯咖啡。(译者注:这是原文作者的 PayPal 链接。)
评论