重构即将完成！2020版React Native会有多大改善？

全文共1601字，预计学习时长6分钟

2015年，React Native被首次推出，使用ReactJS框架开发原生跨平台应用程序。该框架获得了社区的大力支持，并凭借其Web同行的名声逐渐普及，但其实该平台的原始设计并非没有缺点。

2018年，Facebook团队宣布他们正试图解决多年来开发人员遇到的这些最常见问题，进行ReactNative重构。这样的重构改善体现在哪些方面呢？本文将从性能和开发速度方面来谈一谈。

原构造

ReactNative曾被称作“不依赖于平台”的应用框架。从某种程度上讲，该框架的主要目标是让开发人员编写Javascript React代码，而React Native可以在幕后部署其机制，以将Reactreconciliation tree转录成可由原生基础设施解释的内容。它能够：

· 正确显示UI

· 访问原生功能

通常，Android/ iOS生态系统目前的机制如下所示：

每个React Native应用程序中运行着3个并行线程：

· 阴影线程用来设计布局。它使用Facebook自带的Yoga布局引擎来设计flexbox布局并将其发送回UI线程。

· JS线程读取和编译所有JavaScript代码以及执行应用程序大部分业务逻辑。将所有Javascript代码融汇到一个文件中，并翻译任何其他Javascript语法（例如JSX或TS），然后将此代码发送到JavaScriptCore引擎以便运行。

· 原生线程是运行原生代码的位置。每当需要更新UI或访问本机函数时，它将与JS线程连接。它分为原生UI和原生模块。原生模块在启动时都处于预备状态，这意味着即使ReactNative使用蓝牙模块，该蓝牙模块也始终处于运行状态。

使用桥接器可以连接JS线程和原生线程，在后台，C++模块围绕一个异步队列构建。每当它从任一方获取数据时，都会将数据序列化为字符串并将其通过队列传递，并在到达时反序列化。

这意味着所有线程都依赖于跨网桥传输的异步JSON消息，并且这些消息发送到任一端，期望它们在将来的某个时间引发响应，但它还存在拥塞的风险。

每当浏览者在原生环境中拖动滚动条时，信息都会异步发送到JavaScript领域，但是原生环境不会等待Java脚本执行工作并将其以另一种方式发送回去。这会造成延迟，屏幕上出现信息之前会一片空白。

同样，布局设计需要经过很多次才能在屏幕上显示，因为在原生设计布局之前，它需要想尽办法到达Yoga引擎，当然这也意味着要通过桥接器。可以看到异步序列化来回发送JSON数据是怎样造成性能问题的，但是如何使JavaScript与本机通信呢？这就要靠JSI发挥作用了。

新架构

重构版的ReactNative将逐渐弃用桥接器，转而采用新元素——JavaScript接口（JSI）。JSI的一些改进令人惊喜，首先就是JS软件包不再依赖JSC。换句话说，现在可以轻松地将JSC引擎与其他（可能更高性能的）JavaScript引擎互换，例如V8。

第二个改进针对的是这种新架构的基础：“通过使用JSI，JavaScript可以保存对C++主机对象的引用并对其调用方法。JavaScript和原生领域将真正彼此了解。”

这也意味着JSI将允许所有线程之间完全互操作。通过共享所有权，JavaScript代码可以直接从JS线程运行原生方法，不需要将要传递的消息序列化为JSON，这消除了桥接器上的所有拥塞和异步问题。

除了显著改善不同线程之间的通信之外，这种新架构还可以直接控制原生模块。这意味着我们可以在需要时使用原生模块，而不是在启动时将它们全部引导一次。这大大提高了性能，节省了启动时间。

在掌握了C ++的强大功能的基础上，懂得如何将React Native用于定位非常大的系统面板是很容易的。

推出这么多年，ReactNative已过时、待清理、需维护的部分已经积攒很多了，React Native框架已经清除了某些功能，诸如Webview或AsyncStorage之类的模块正逐渐从React Native核心中移出，将转变为社区管理的存储库。

凭借新的精简核心模块以及JavaScript代码与原生代码之间强大的互操作性机制，React Native重构将实现许多性能改进和更全方位的开发人员工作流。它计划在2020年第四季度之前完成全面重组，更好的性能和全新开发体验十分令人期待。