关于javascript:React-Native迎来重大架构升级性能将大幅提升

8次阅读

共计 2227 个字符，预计需要花费 6 分钟才能阅读完成。

7 月 14 日，React Native 外围团队的 Joshua Gross 在 Twitter 说，RN 的新架构曾经在 Facebook 外部落地了，并且 99% 的代码曾经开源。这次的架构降级“蓄谋已久”，Joshua 说他们从 2018 年 1 月就开始布局了。

Facebook 曾在 2018 年 6 月发表了大规模重构 RN 的打算和路线图，整个的重构目标是为了让 RN 更轻量化、更适应混合开发，靠近甚至达到原生的体验。具体包含以下几个方面：
扭转线程模型。UI 更新不再同时须要在三个不同的线程上触发执行，而是能够在任意线程上同步调用 JavaScript 进行优先更新，同时将低优先级工作推出主线程，以便放弃对 UI 的响应。
引入异步渲染能力，容许多个渲染并简化异步数据处理。
简化 JSBridge，让它更快更轻量。
这次的架构降级对于 React Native 意义重大，依照官网的说法，这将大幅度晋升 RN 的性能。自 RN 公布以来，它大抵经验了如下几次的版本迭代（图片来自京东熊文源 GMTC PPT），这一次次要是解决诟病已久的性能问题。

为了进一步理解 RN 这次架构迭代的细节，InfoQ 记者采访了 58 同城资深前端工程师，58RN、Hybrid 框架的负责人蒋雄伟。以下为具体内容。
InfoQ：能给大家介绍下你了解的这次架构降级吗？新的 Fabric 渲染引擎是不是会大幅度晋升 RN 的性能？
蒋雄伟：首先阐明一下，Fabric 不是渲染引擎，是新架构 UI 渲染局部的代号。React Native 新架构包含三个要害局部：JSI、TurboModules 和 Fabric。JSI 全称是 JavaScript Interface，代替的是原来的 Bridge。通过 JS 调用 C++，C ++ 调用 Java/OC 的形式，实现了 JS 和 Java/OC 之间的互相操作的。
TurboModules 是新架构 API 局部的代号。得益于 JSI，JavaScript 能够间接调用 Native 模块的办法。相似于在浏览器中，JavaScript 调用获取经纬度办法，理论调用的是 C++ 底层的获取办法。
Fabric 是新架构 UI 渲染局部的代号。得益于 JSI，JavaScript 能够间接操作 Native 的组件，渲染 UI。相似于，在浏览器中，JS 调用 createElement 创立 div 元素，并通过 C++ 底层渲染 UI。
依据现有的性能报告来看，新架构的性能大略晋升了一个数量级。这里的性能指的是 API、UI 的操作性能，对首屏性能的影响还有待进一步评估。
InfoQ：新的架构代码全量放到 GitHub 了吗？你们团队打算降级吗？
蒋雄伟：Facebook 外部落地的新架构代码并未齐全放到 GitHub。目前，JSI 和 TurboModules 局部曾经能够应用，Fabric 局部还要等上一段时间。此外，在新架构的生态方面，比方导航、动画等，预计会有很多变动。
咱们往年是有降级打算的，也十分冀望可能快点用上 RN 新架构。依据咱们以往的降级教训，最须要关怀的是新、旧版本兼容性问题。咱们外部有 9 个 App，300+ 的我的项目须要迁徙，既须要自动化迁徙工具，也须要业务开发和测试同学的配合，还须要一套逐渐扩量的计划。
InfoQ：大家常常会拿 RN 和 Flutter 做比照，2019 年 GMTC 上，京东架构师熊文源说，在启动性能上，RN 略微优于 Flutter，但渲染方面显著不如 Flutter，这是 RN 整个框架的瓶颈。这次降级过后，你会怎么评估两个框架呢？
蒋雄伟：这次降级过后，RN 在性能上可能追平 Flutter。首先，JavaScript 和 Dart 语言上都反对了 AOT 预编译，打个平手。其次，JavaScript 和 Dart 和底层交互都是通过 C++ 进行的，也是打个平手。最初，RN 原生组件绘制有平台的优化加成，绝对于 Flutter 自绘引擎绘制，可能还会好上一些。
其余方面，萝卜青菜各有所爱，前端同学会更喜爱 RN 一些，客户端同学更喜爱 Flutter 一些。
InfoQ：你们有调研过 Flutter 吗？
蒋雄伟：咱们外部其实有很多 App 在用 Flutter，也开源了 Flutter Fair UI& 模板动态化框架，和 Magpie 开发的工具流。但 58 同城、安居客这种超级 App 没有用 Flutter，次要放心的还是包体积大小和启动内存。
InfoQ：从你视角看，决定跨端框架倒退的关键因素是什么？跨端和原生的解决方案之间，将来会是一种怎么样的动态平衡？
蒋雄伟：跨端框架倒退的关键因素是净收益的大小。从框架开发者的角度讲，Facebook 外部有 1000+ RN 页面，跨平台带来的净收益必定很不错。Flutter 我有些不确定，这决定于 Google 的 Fuchsia 操作系统是否胜利。从框架使用者的角度讲，生态起不来的，比方 Weex、NativeScript，开发成本太高，净收益可能为负的，这也会反过来制约框架的倒退。
有原生就有跨端，二者会始终并存，但跨端计划的市场份额会变的更大。原生解决方案更多是在一些翻新的、根底的场景中，比方短视频、VR 或者跨端基础设施。跨端解决方案，比方 Hybrid、小程序、RN、Flutter 等等，会更加成熟，应用的场景也会越多。又因为可能节约开发成本，在现有的场景中会被更多的应用。