首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React Native 新架构

React Native 新架构

作者头像
ConardLi
发布2020-07-30 00:21:58
2.1K0
发布2020-07-30 00:21:58
举报
文章被收录于专栏:code秘密花园code秘密花园

译者:xiaoxiaosaohuo

原文:https://github.com/xiaoxiaosaohuo/Note/issues/60

第一部分 React and Codegen

React Native是一个开源的跨平台解决方案,可以让你轻松地使用React(和JavaScript)来创建 native 移动应用程序.

为了更好的理解 React Native 的工作原理,我们准备了这个基本图表

如图所示,有四个核心部分:

  1. 你自己书写的React 代码
  2. 从你书写的代码转换之后的js
  3. The Bridge ,
  4. Native side

当前架构的关键方面是两个领域,JavaScript和Native,他们彼此并不真正直接通信,它们的通信依赖于跨Bridge传输的异步JSON消息。这些被发送到native的代码,未来的某个时间会做出响应。最近React Native 团队重新考虑了这种异步消息方法,他们正在为React Native开发一个新的架构。

我们可以这样描述他们的策略:针对React Native的四个核心部分中的每一部分并单独改进它们。

React

React Native团队主要利用其同事在核心React库上所做的工作。意味着他们会采用React 16.6版本的新特性。在可预见的未来,会允许开发者使用Suspense来让组件在render之前等待某些东西,使用Hooks,和其他一些React features 。

React Native团队也在代码中加入了静态类型检查器(Flow或TypeScript),们正在开发一个名为CodeGen的工具来“自动化”的处理JS和native端之间的兼容性。通过类型化的JS,这个生成器可以定义Fabric和TurboModules(新架构的元素)所需的接口文件,以便可以放心的在各个领域发送消息,这种自动化处理也会加速通信的速度,因为没有必要每次验证数据。

JSI and JSC

这部分介绍React Native如何使用你编写的代码以及新架构如何更改它。

由于JavaScript的性质,React Native团队必须依赖引擎来解释它,以便它可以在native移动应用程序中运行,在当前的架构中,团队选择直接使用JavaScriptCore(JSC).

为了增强这一部分,他们决定适当的分离从编写的代码生成的bundle和压缩的js,以及使用它的引擎。这是通过在两者之间引入第三个元素(明确称为JavaScript接口(JSI))来实现的。

JSI本身不是React Native的一部分,它是(理论上)任何JavaScript引擎的统一,轻量级,通用层。

首先,现在可以更轻松地将JSC更换为其他引擎(或更新版本的JSC,最近发生在RN 0.59中)。您可能知道的其他选项包括Microsoft的ChakraCore和Google的V8 。

第二 , 可以说是整个新架构的基石 - 是“通过使用JSI,JavaScript可以保存对C ++ host对象的引用并调用它们上的方法。”,这意味着JavaScript和Native的两个领域将真正意识到彼此的存在,并且不需要将要传递的消息序列化为JSON,从而消除桥上的所有拥塞。

这是一个非常激动人心的变化,因为C ++一直是在不依赖JavaScript的情况下在Android和iOS之间共享代码的少数方法之一;Android的native代码是用C \ C ++编写的(Java和Kotlin通过Java Native Interface“向下翻译”,类似iOS默认支持它(Objective-C是C的严格超集)。

Fabric and TurboModules

这个简化的旧架构的bridge 模块

这组元素基本上负责两种不同的行为:定义UI的外观和行为方式(通过Shadow Tree)和管理Native 端(通过Native Modules),如上所述,这些通信是通过异步JSON消息进行的,这些消息通过一个通信通道进行批处理和来回发送,正如您所料,这可能会变得拥挤并导致次优的体验。

新架构将bridge分为两部分

  1. Fabric,新架构的UI manager,
  2. TurboModules,这个与native端交互的新一代实现

Fabric 主要关注UI层的渲染,在当前的架构中,所有UI操作都由一系列跨桥“步骤”处理(React - > Native - > Shadow Tree - > Native UI),在新的实现中,允许 UI manager 直接用C++创建Shadow Tree ,通过减少跨越领域的“跳跃”次数,极大地增加了这个过程的快速性。基本上,这极大地提高了用户界面的响应能力。

通过使用JSI,Fabric将UI操作作为函数公开给JavaScript,新的Shadow Tree(决定在屏幕上真正显示的内容)在两个领域之间共享,允许两端直接交互。

而且JavaScript端的直接控制允许从新的React中获得UI操作的优先级队列,为了在有利于性能的情况下进行选择性同步执行。这部分将允许改进常见的陷阱,如列表,导航和手势处理。

在当前的实现中,当应用程序打开时,需要初始化JavaScript代码(例如蓝牙)使用的Native Modules,即使它们没有被使用。 新的TurboModules方法允许JavaScript代码仅在真正需要时加载每个模块,并直接持有模块的引用,意味着不再需要使用旧桥上的批处理JSON消息进行通信,这将显著的提升应用的启动时间。

Native Modules

React Native,在更概念的层面上,希望对其原生平台“不可知”,这是支持创建第三方实现(如react-native-web和react-native-windows等)的关键功能.

此外,Facebook团队并不拥有iOS或Android平台,因此最后一个块的方法不能“纵向”深入了解这些行为的方式,但是在横向上可以减少react-native codebase 的总体大小。

这项工作称为‘“Lean Core” ’ 从高层次来看,这种方法想要实现的是将代码置于主React Native代码库中并将其提取到自己的存储库中。

这主要有两个好处,减少生成的应用程序的重量,并允许对Facebook未直接使用的元素进行适当的维护,由于修改Facebook拥有的代码的复杂性,后者在过去得到的关注较少。

完整的新架构图如下

正如您所看到的,Facebook团队的复杂工作影响了React Native工作方式的许多不同方面,而不会显着影响使用它的开发人员。不是一个小壮举。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-07-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 code秘密花园 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 第一部分 React and Codegen
  • React
  • JSI and JSC
  • Fabric and TurboModules
  • Native Modules
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档