从移动开发人员的角度来看React Native



本文针对的是iOS和android开发人员,他们已经非常熟悉该领域并且对React Native有所了解。

当我第一次了解React Native时,我以它为契机,让Web开发人员入侵我的领地( 绝对不可能! ),同时破坏了运行良好的无崩溃60 fps产品。 事情就这样发生了。 结束了。 真实的故事竟然更长。

拒绝


移动应用程序中的JavaScript? 我只想到了几个在iOS上使用JavaScriptCore的库(这些库占使用它们的应用程序崩溃的90%)和“旧模型”的混合应用程序(嗯,这就是atas)。

混合应用程序一直表现出希望,直到您尝试它们的那一刻,此后,您开始竭尽全力地逃避它们。

记住三年前学习Xamarin的尝试失败,我很快放弃了使用React Native的想法。

值得注意的是,我总是很高兴能感知到编写本机应用程序的新方法(从ObjC到Swift,从Java到Kotlin,从Eclipse到Android Studio)。 我多年来一直从事iOS和android的业余爱好和专业工作。 切换到新的语言(在同一操作系统内)或IDE后,我很少回到前一种。 看来React Native是合乎逻辑的下一步,又是新的一步。 还是退后一步?

怒气


当我已经知道如何“真正”做到这一点时,为什么还要教简化版呢?
当公司设定完全重新设计其中一个应用程序(当时仅在iOS上可用)并在android上发布它的任务时,我仍然必须找到该问题的答案。

如何同时做两件事并减少编写代码? 像这样的建议:瘦客户机,带有来自Swift / Kotlin代码的调用的C库,React Native?

React Native看起来非常有前途,因为它能够创建库,然后立即在三个平台(iOS / android / web)上使用它们。

竞标


对任何人都有前途,但对我却不行。 我当然对这个转折不满意。 我感到自己处于开发iOS和android的能力的顶峰,然后被要求抛弃所有这些知识,就好像我是应届毕业生并且只有0。我什至怀疑使用React Native能否创造出高质量的产品。



抑郁症


怀疑是合理的。 主要问题是:

  • 在React Native的核心中有相当数量的滴;
  • 仅在一个平台上起作用的方法(扩展坞表明它们在任何地方都可以工作);
  • 描述不完整。 只需查看React Native收集器底座即可

隐藏的主要问题是:我头部的内部障碍物,使我无法看到一堆负号背后的优点。

验收


当然,React Native不仅是缺点。 有很多优点,比起特定平台上的同类工具,它写起来容易得多,而且开箱即用的效果更好。

如果我们抛弃明显的问题,例如坠毁和微弱的码头,以下是我必须面对的示例:

Java脚本


难怪 这是流血,流汗和流泪相伴的第一件事。
当我开始回忆起以前作为前端开发人员的经历时(我在移动应用程序开发之前就涉足网站开发),我从越南综合症开始: 约翰尼,JavaScript环绕着我们!

如果您决定在React Native上编写应用程序,那么我建议参加一门最新的JS课程。 它们不必是React或React Native。

在过去的几年中,随着ES6,ES7和ES8标准的发布,编写代码的方式已经发生了很大变化。

而且他变得很有个性

静态检查


在最初的几个月中,非常缺乏使用所有本地移动语言的静态分析器。

有多种实用程序可以消除其缺失,并执行部分功能

布局元素


这里最大的挑战将是iOS初学者。

这个挑战是缺少可视界面编辑器。

一切都使用JSX标记在代码中完成。 从技术上讲,此标记是可选的,它有助于查看组件的层次结构。 Android开发人员会放心,注意与XML的相似之处。

同时,对这些视图和重用的潜力有清晰的了解。

在iOS中,取决于选择哪种方法(代码或“界面”构建器中的布局),可以选择一种或另一种。 是的,这两个问题都可以解决,但是您必须编写大量的代码。

React Native没有这个问题。
顺便说一下,在Android中也不存在。
但是,Android专家将欣赏在标记中将参数从外部组件直接传递到内部组件的方式。

这里的基本视图是LinearLayout(android)和UIStackView(iOS)的类似物,同时具有常量的混合。 定位元素的一种非常简单的方法(与基体相比)。

UIViewController和Activity


React Native没有一个。
当然,他们是在幕后。 与他们直接互动将无效。 是的,这不是必需的。

所有React Native组件的生命周期与iOS和android完全不同,因此很难一一列举。 如果您关注与本机系统的差异,那么:

  • UI元素本身在更改输入参数时会更改状态/外观;
  • 在android上,无需处理onSaveInstantState 。 React Native为我们完成了所有这些工作;
  • 在iOS上,没有方法可以直接显式报告应用程序屏幕出现/隐藏的时间。

建立时间/实时重载/热重载


由于采用增量组装,因此可以实现极高的速度-仅重建修改过的模块,而不重建整个捆绑包。

JS代码中的所有更改都可以在模拟器中立即看到。 极大地加速发展!

JS缺乏本机功能


在React Native的JS部分中,并不是您需要的所有东西都是开箱即用的。

您可以在两个平台上编写本机部分,制作一个JS包装器,然后像其余代码一样调用它。 没有什么复杂的。

有大量由第三方开发人员编写的现成模块。

所有模块都通过npm (适用于iOS的CocoaPods和适用于Android的Gradle的连接)进行连接,它们具有具有必要功能的本机代码。

通用链接和深层链接


该功能由Facebook实现。
它运作良好且始终如一。

处理第三方意图


作为上一段的特殊情况。

android上最大的问题是处理应用程序中的Deeplink以外的Intent。
当然,这取决于意图和收到意图时需要执行的操作。

您可以撰写有关此主题的另一篇文章。 起点是将createReactActivityDelegate方法添加到MainActivity。

性能表现


在带有复杂单元格的长列表中滚动时,很容易获得60 FPS。
其他所有功能(例如,按下按钮,在字段中打印文本)的性能都较低。 在大量元素的状态动态变化期间,这一点很明显。 这很容易解决。 文档“ 将本机驱动程序用于Animated”中的一个好部分。

开箱即用,无法正常控制手势及其与动画的关联。



不稳定性


通常,一个项目只是停止构建,例如:

  • React Native内核更新(包括更新次要版本时);
  • npm模块更新;
  • Xcode更新;
  • CocoaPods更新(与此有关的永久性问题);
  • 就这样 是的,那也发生了。

幸运的是,大多数这些问题都可以很快解决。 您可以添加一个脚本,以清理所有地方的所有缓存,并在出现问题时运行它。 帮助解决98%突然出现的奇怪问题。 除了CocoaPods之外,其他一切都是令人难过的。

第三方依赖性不稳定


iOS上最大的问题是并且现在是npm模块广泛使用方法泛滥的愿望。

许多本机模块通过二进制文件连接。 理解以相同的方法浏览多个独立模块并不是那么简单。

组装过程分为几个阶段,每个阶段都有可能出错。

更新第三方依赖项时不稳定


一些npm模块依赖于其他npm模块,依此类推。 如果将两个模块绑定到第三个模块的不同版本,则在最佳情况下,安装时我们会立即收到警告。 在最坏的情况下,没有警告,但没有任何效果。

如果npm模块依赖具有不同版本的本机Android模块,则会出现类似的问题。

清除缓存后,可以安静地加载新版本。 看来他什么也没做,但停止工作了。

单元和UI测试


React Native附带了一个通过Jest库非常简单的测试机制。 方便的测试覆盖率分析-显示从未调用过被测函数中的哪些行。

有用于UI测试的库。 实际上,到目前为止,我还没有使用它。

结论


与React Native一起工作13个月后,我可以自信地说:

  • 它适用于只需要从服务器获取列表,显示列表,显示列表项的详细视图,将更改发送到服务器的大多数应用程序;
  • 以上所有都是用更少的代码实现的;
  • 现在,这是与我联系的新项目的“默认”选择,因为请参见上一段;
  • 不适合出国“发送请求-收到响应”的项目,仅举几个例子:照片编辑器,播放器,使用蓝牙,人工智能,机器学习,社交。 网络信使;
  • 可以在React Native上完成高级项目,但是您仍然必须编写大量本机代码,因此这一点不再有效。
  • React Native已经来了也不会去,这是不容忽视的。
  • 对本地移动开发人员的需求将略有减少,新的本地移动开发人员的涌入将减少更多。 怎么了 见下文;
  • 一个人通常遵循最简单的方法,无需尝试花费20%的努力(与本地开发相比)来完成95%的应用程序;
  • 由于上述三点:本机移动开发人员的需求和供应之间的差距将变得更大。 那些没有他们真的无法做的人会发现很难找到他们。 这太可悲了。

对于立即开始在React Native上写并且由于某种原因决定最终阅读这篇文章的人来说,这句话的最终意思是。

如果您认为自己理解主题并且做得很好,那么请以本机开发人员的身份尝试。

Source: https://habr.com/ru/post/zh-CN416097/


All Articles