从开始到现在,笔者接触RN已经接近半年,适逢各种变化的发生,于是,简单的遐想了一下RN的未来。

  Airbnb在今年早些时候,宣布了放弃继续使用RN,并且发布了一篇“React Native at Airbnb: The Technology”的长篇博客,详细的讲了在airbnb中,使用RN的过程中,自己的总结的一些经验和一些痛点,鉴于国内网络环境的原因,笔者也简单的转载一下(限于笔者的英文水平,翻译不确切之处还请批评指正):

  做得好的地方

  跨平台、统一的设计语言系统(DLS)、React(特别是组件体系、简单的生命周期和声明式的写法)、迭代速度、基础设施上的额外开销(如网络、设备信息、i18n等)、性能、Redux、以native为支撑(更强大的native能力)、静态分析、动画、js/React的开源、伸缩盒模型(基于yoga)、web端的合作。

  做得不是那么好的地方

  React Native的不成熟:虽然rn发展得很快,但是有欠成熟的它在某些具体的方面做得并不好,而且这种不成熟,无法避免;

  维护React Native的分支:由于rn的不成熟,需要我们去fork自己并维护rn的代码,但是这对于升级RN版本来说是非常恐怖的;

  js的可用性:由于js是一门弱类型语言,这导致在其他工程师在学习和使用的时候很不便利,虽然我们尝试使用了flow和ts,但是效果并不理想(我们将会继续在web中使用ts);

  重构:js的弱类型特性导致了再项目重构时非常困难;

  JSC(javascriptCore)的不一致性:ios会使用统一的jsc,这并没有什么问题,但是在android上,由于各厂商使用的jsc都不一样,你很有可能会使用默认的jsc(版本非常古老),

  而且,在调试的时候我们通常都会使用chrome开发者工具,虽然这在99%的情况下都是没问题的,由于在调试时js是跑在chrome的v8引擎中的,这导致了android调试时,其实运行的环境与我们所期望的并不相同,这很大程度上增加了调试的难度;(笔者也曾碰到过Date对象的实现不一致的问题);

  RN的开源库:因为RN需要对各个平台的熟悉,但是通常的用户仅了解一到两个平台,这也导致了RN的开源库在实际使用时,总会或多或少的碰到一些问题;(笔者也在切换打包工具时碰到了依赖库模块规范不规范的问题);

  平行的基础设施和功能:我们积累大量的native基础设施,但是在RN,这一切都需要从零开始,在很长的一段时间内,这其实对于我们的工程师的开发效率是有很大的影响的;

  crash监控:因为RN在行业中的特殊性,我们不得不开发很多上报的基础设施(如上传sourcemap)等工具去帮助原本已经成熟的工具(如Bugsnag)来进行crash报告统计;

  native bridge:由于js的弱类型特性,导致在与native通信时,原本的整形会被转换为字符串,而这些操作很有可能会引起某个平台的调用失败或者崩溃,但在上层却无法得知;

  初始化时间:在RN开始渲染前,你必须先初始化运行时,但这会花费至少几秒的时间,这也使得RN APP的初始化时间很长;

  初始化渲染时间:不像native的渲染,RN的渲染需要从主线程->js->yoga layout线程->主线程,才能完成渲染,而这通常又会消耗(P90 280ms in iOS 440ms in Android),

导致我们需要采取一些hack手段来避免出现意料之外(显示白屏)的情况

  app包大小:RN在包大小上也有一些没法忽略的影响,在Android上,整个RN的包大小(Java + js + native库 + js runtime)已经接近8mb,再加上x86和arm,就已经12mb了;

  64位:由于这个issue,我们至今未能在android上完成;

  手势:我们通常都会避免在RN的应用里使用复杂的手势,因为iOS和Android对不同手势是的实现和识别都有差异,且没办法统一;

  长列表:虽然RN已经对长列表做了一些优化,比如FlatList,但是仍然有许多因为线程的原因带来的限制无法解决;(比如快速滚动时view没办法同步刷新,Text元素没法预先计算高度等)

  升级RN:RN升级过程中,新版的RN有时候会依赖React的beta或者alpha版本,但是大部分的第三方库并不会去支持这些“预发布”的版本,这个升级也带来了很大的麻烦;

  无障碍访问:RN无障碍访问的API存在的不少问题,使得我们不得不为了一个很小的改动而需要fork一个独立的RN版本来进行修改;

  难以修复的crash:在使用中,我们还碰到了一些无法修复的crash;

  跨进程保存实例状态:在android上,由于Android自己的机制它会根据设备的内存状态结束位于后台的进程(比如你的RN应用),当重新唤起的时候,你的app使用状态将得不到保存,这一特性虽然可以用redux的技术来fix,但是他并不能完全结局问题,而且在某些情况,甚至会引起崩溃。

  其实Airbnb碰到的问题笔者大部分也碰到了,之前的文章也有提及rn踩坑实践——从输入框“们”开始《RN持续踩坑实践》《RN心路历程》,这里就不再赘述了。

  总的来说,对笔者而言,RN更适合用在那种内嵌H5的且交互不会太复杂,而且并不要求全平台一致的场景,而整个APP都要推RN,其实就笔者的经历而言,并不算是一个很好的选择。

  另外,近几个月flutter也进入了大家的视野,而且它所推崇的全平台一致性也是一个很吸引人的特性。不过它是基于Dart的,当然对于native的同学不用再写js的也是件好事情,不过也由于不在依赖js,也就摒弃了RN一直使用的jsc的一整套架构,而取而代之使用了基于google自己实现的渲染层api,来达到一致性的效果。甚至令笔者产生了一种“flutter才是未来”的错觉。

  当然一切在没有实践之前都是雾里看花,毕竟生态才是一门技术是否能够持续发展的关键,现在谈这些也许,还有点早。

  其实整个前端圈子发展得越来越好,新事物层出不穷,未来,说不定Firefox OS类似的技术方案也会成为主流也说不定。

【杂谈】RN的一点回顾与未来的展望的更多相关文章

  1. Apache HBase 2015年发展回顾与未来展望

    编者按:高可用架构推出 2015 年度回顾系列文章,分享在架构领域具有典型意义的年度案例,本文由张虔熙分享.转载请注明来自高可用架构公众号「ArchNotes」.   张虔熙,Hulu 网,专注于分布 ...

  2. WPF 杂谈——开篇简言。

    这俩年多来笔者一直在从事关于WPF的开发.虽然不能说是专家级别的.但是对于WPF的应用还是有一定的了解.论他的灵活性决对不在WinForm之下.WPF的出现更是引发一段热议.他的何去何从更是让很多人感 ...

  3. WPF 杂谈——开篇简言

    这俩年多来笔者一直在从事关于WPF的开发.虽然不能说是专家级别的.但是对于WPF的应用还是有一定的了解.论他的灵活性决对不在WinForm之下.WPF的出现更是引发一段热议.他的何去何从更是让很多人感 ...

  4. CSS3 之 flexbox 响应式的未来

    CSS3 之 flexbox 响应式的未来 flexbox 伸缩盒模型 . flex: CSS3中一个重要的而且非常有用的属性,用来制作弹性布局是非常的方便而又强大. . flex布局:旨在提供一个更 ...

  5. 未来云原生 | CIF 论坛精彩看点

    当下云原生技术正在飞速发展,那么如何准确理解「云原生」?在发展不够成熟,行业认知差异大的情况下,不论是云原生计算基金会(CNCF),还是行业的任何大咖,都不能给出精确的.便于理解的定义.我们要理解的逻 ...

  6. Vue in 2016

    原文链接:Vue in 2016 Vue 作者尤雨溪对 Vue 在 2016 年的总结以及未来的展望 现在已经是2016的尾声了!在这过去的12个月里,Vue的持续增长速度已经超过了我的预期--这个项 ...

  7. web之困:现代web应用安全指南

    <web之困:现代web应用安全指南>在web安全领域有“圣经”的美誉,在世界范围内被安全工作者和web从业人员广为称道,由来自google chrome浏览器团队的世界顶级黑客.国际一流 ...

  8. Python技术公众号100天了

    公众号100天了,是个值得一提的日子! 我从2017年10月31日开始做这个公众号,到今天2018年2月7日,差不多100天时间 .虽然公众号很早就申请了,但直到去年10月31日,我才有真正把这个公众 ...

  9. 人工神经网络--ANN

    神经网络是一门重要的机器学习技术.它是目前最为火热的研究方向--深度学习的基础.学习神经网络不仅可以让你掌握一门强大的机器学习方法,同时也可以更好地帮助你理解深度学习技术. 本文以一种简单的,循序的方 ...

随机推荐

  1. jq自定义裁剪,代码超级简单,易修改

    1.自定义宽高效果 1.html 代码  index.html <!DOCTYPE html> <html lang="en"> <head> ...

  2. oracle coherence介绍及使用

    网上除了官方用户指南,关于Coherence的介绍文章资料很少,因此总结出此文,从原理到快速指南和基本最佳实践,希望对需要的人提供一个参考. 1 Coherence 概述 1.1 Coherence是 ...

  3. win7右下角无线网图标显示未连接,但是实际上已连接上,也能上网

    首先,要确实是不是服务启动的问题,方法很简单,重新启动电脑就可以. 如果问题依旧,那么按下Win+R快捷键,输入“services.msc”,打开服务界面. 然后会看到右侧窗口出现好多设置项,找到“R ...

  4. Android系统改动时间格式为24小时制

    1. frameworks/base/packages/SettingsProvider/res/values/defaults.xml 添加<stringname="time_12_ ...

  5. WebService(2)-XML系列之用Stax操作Xml

    源代码下载:链接: http://pan.baidu.com/s/1ntL1a7R password: rwp1 本文主要讲述:利用Stax处理xml文档 一.读取xml 1.基于光标的查找 核心:X ...

  6. 修改linux环境变量配置文件

    发现error ImportError: dynamic module does not define module export function (PyInit_cv_bridge_boost) ...

  7. su: /bin/bash: Permission denied带来的疑惑

    >客户一个oracle突然当机了,由于业务启动,客户下意识的重启了服务器,系统是起来了,准备切换到oracle用户下启动数据库,可以怎么都无法su切换,真是火上浇油呀,描述如下: 在root用户 ...

  8. C项目实践--家庭财务管理系统

    1.功能需求分析 家庭财务管理系统给家庭成员提供了一个管理家庭财务的平台,系统可以对家庭成员的收入和支出进行增加,删除.修改和查询等操作,并能统计总收入和总支出.其主要功能需求描述如下: (1)系统主 ...

  9. mac上为nginx打开防火墙

    1 nginx的路径必须是物理路径,不能是链接 2 执行下面的两个命令后重启电脑 命令 sudo /usr/libexec/ApplicationFirewall/socketfilterfw --a ...

  10. jquery ui tabs详解(中文)

    1 属性1.11 ajaxOptions,当选项卡加载内容时,添加一个ajax选项.只有ajax时,添加的ajax选项才起作用.默认值为null.上面的例子中,添加了beforeSend和succes ...