Fabric架构在React Native中是如何工作的

React Native的Fabric架构是对传统React架构的一个以性能为重点的更新。它使用异步渲染和新的调和算法来提高应用程序的性能，减少更新UI的时间。Fabric还允许更有效地使用内存，更好地处理复杂的动画和互动。

问题所在

在目前的架构中，所有的UI操作都由一连串的跨桥步骤处理。在目前的架构中，有四个核心部分 —

• 开发者编写的React代码（与网页上的代码非常相似）。

• 从你写的内容中得到解释的JavaScript。

• 一系列的元素，统称为 “桥”。

• 以及Native端。

当前架构的关键是，这两个领域，即JavaScript和Native，并没有 “意识到 “彼此的存在。这意味着，为了沟通，他们依靠异步JSON消息在桥上传输。这些信息被发送到本地代码，期望（但不保证）它们会在未来的某个时候引起（设法得到）响应。

解决方案（Fabric架构）

新的架构（Fabric架构）主要由两个主要部分组成 —

布局引擎

布局引擎负责计算一个组件及其子女的布局。

它使用一种名为Yoga的新算法，它是Facebook的Yoga布局引擎的一个分叉。Yoga比传统的布局引擎更有效，能够更快地计算布局，并减少内存占用。这使得复杂和大型组件的性能得到改善。

渲染器

渲染器负责将组件渲染到屏幕上。

它使用一种叫做异步渲染的新技术。这使得渲染器可以同时处理多个组件，从而提高性能并减少渲染一个组件所需的时间。

它是如何工作的（Fabric架构）

• React Native应用通过用户互动启动。

• 新的Fabric架构加载原生端，而不是打开原生模块。

• 然后它通知JS线程做他们那边的事情。

• 现在JS端加载所有的main.bundle.js，其中包含所有的JavaScript和React组件逻辑。

• JS通过ref本地函数（使用JSI API以对象形式暴露的函数）调用Fabric，影子节点像以前一样创建树。

• 最后Yoga进行布局计算，从基于flexbox的风格转换到主机布局。

• Fabric完成它的工作并显示UI。

总的来说，React Native中的Fabric架构为slayout和渲染组件提供了一种更有效、更高效的方式，从而带来了更流畅的用户体验。