本文由 简悦SimpRead 转码，原文地址 medium.com
Fabric（最新的渲染系统）为JavaScript代码引入了一个新的接口，以便与n......。
By 近来，React-Native已经成为开发移动应用的趋势平台之一。然而，这些让我好奇地想知道React-Native所使用的架构。目前，Fabrics架构是react-native使用的最新渲染系统。
Fabric旨在重建react-native的渲染层。在目前的互操作性中，所有的UI操作都是由一连串的跨桥步骤处理的。然而，新的实现允许UI管理器直接在C++中创建影子树，这通过减少跨领域的跳转次数，大大增加了流程的敏捷性。基本上，这大大提高了用户界面的响应速度。换句话说，这是对屏幕的渲染优化，基本上，它能极大地提高性能。
另外，通过使用JSI，Fabric将UI操作作为函数暴露给JavaScript：新的阴影树（决定在屏幕上真正显示什么）在两个领域之间共享，允许从两端直接互动。
而且，如果这还不是一个很大的改进，这种来自JavaScript方面的直接控制允许拥有来自新React的UI操作的优先级队列，以便在有利于性能的地方选择同步执行。这个基础将允许改进常见的缺陷，如列表、导航和手势处理。
当前的架构结构
by 在旧的架构中，有四个核心部分：由开发者编写的React代码（与网页上的代码非常相似），从你编写的内容中得到解释的JavaScript，一系列统称为 "桥 "的元素，以及Native端。
目前架构的关键是，这两个领域，JavaScript和Native，并没有真正 "意识到 "对方。这意味着，为了沟通，他们依靠异步JSON消息在桥上传输。这些信息被发送到本地代码，并期望（但不保证）它们会在未来的某个时候引起（设法得到）一个响应。
新的架构结构
by Chen Feldman
- JSI:- 它将取代目前架构中的桥接器。实际上，JSI为JS Runtime引擎提供了API（当你运行js代码时，会在那里执行），并使JS直接意识到本地函数和对象，而无需任何桥接。它通过同步从JS线程到本地的调用，反之亦然，使我们受益。使用对UI主线程的直接调用来快速渲染，并且在线程之间共享数据。
- Fabric:--UIManager的新名字，它将负责原生端的工作。现在最大的区别是，它将使用JSI公开其本地函数，而不是通过桥接与JS端进行通信，因此JS端和反之亦然，可以通过Ref函数直接通信。更好、更高效的性能和双方之间的数据传递。
- Turbo模块：--Turbo模块的目的与当前架构中的原生模块相同，但其实现方式和行为方式不同。首先，它们是懒加载的，这意味着它只在应用程序需要它们时加载，而不是在启动时加载所有的模块。此外，它们也是使用JSI暴露出来的，所以JS持有一个引用来使用它们在React Native JS库侧，这导致更好的性能，特别是在启动时。
- CodeGen:-它被用来使JS成为一个单一的真理来源，这将有助于我们创建js的静态类型，所以本地端（fabric和turbo模块）将意识到它们，并将避免每次验证数据，从而导致最小的时间消耗，更好的性能和更少的错误机会，同时传递数据。
新架构的流程。
- 用户点击应用图标。
- Fabric直接加载本地端（没有本地模块）。
- 它告诉JS线程，它已经准备好了，现在JS端加载所有的main.bundle.js，其中包含所有的js和反应逻辑+组件。
- JS通过ref native函数（使用JSI API以对象形式暴露的那个）调用Fabric，影子节点像以前一样创建树。
- Yoga进行布局计算，从基于flexbox的风格转换到主机布局。
- Fabric完成它的工作并显示UI。
react-native-screens with Fabric：
在react-native-screens中，已经有一个新的和旧的架构的实现。要用react-native-screens制作你的第一个fabric应用，你需要遵循以下步骤。
- 使用React Native CLI创建一个新的应用程序：
npx react-native init NewRN68App --version 0.68.0-rc.1。 - 像往常一样添加 react-native-screens:
yarn add react-native-screens。 - 现在，为了在iOS上启用Fabric，你需要在
ios文件夹中运行RCT_NEW_ARCH_ENABLED=1 pod install。 - 对于Android，你需要在
android/gradle.properties中改变newArchEnabled=true。 - 现在你可以像往常一样在Android和iOS上构建应用程序。已安装的屏幕版本将自动检测Fabric是否启用，并将提供一个适当的实现。
所有在本地和JS组件之间进行的通信都是通过JSI（一个C++ API，用于与iOS上的Objective C代码和Android上的Java代码通信）完成的。信息从一边到另一边是通过C++函数来完成的，而不是通过序列化/反序列化（将对象转换成字符串，反之亦然），以便通过桥梁传递。正因为如此，那些打算支持新架构的库需要适应这个新的接口。如果你要建立一个全新的库，使用JSI是相对简单的，而在现有的库中实现它可能是一个挑战。在这里，我们希望能够同时支持结构和现有的版本，并在这两种实现之间尽可能地减少共享代码的数量。
现有库的迁移过程的主要步骤如下。
- 通过JS的方言（语言的一种变体）在Flow中编写组件规范。这段代码将是应用程序的根。它为我们提供了在本地和JS方面使用的规范。这段代码也被用来生成本地实现，以确保类型安全。
- 在接下来的步骤中，我们在本地端添加了可以处理道具和事件的实现。在Android上，代码库是在新旧架构之间共享的。在iOS上，我们创建了新的文件以使两个实现都独立。
- 为了保持库中两种架构的工作，我们有一些特定于某个架构的文件/类。
总而言之，新架构的推出肯定会使React-Native领先。用户体验肯定会变得更加顺畅，而react-native-screens的织物兼容版本的发布是适应新React-Native架构的一个突破。我希望这篇文章能帮助你了解社区在其架构中带来的巨大变化。
