📜  React Native 是如何工作的?

📅  最后修改于: 2021-10-22 02:56:50             🧑  作者: Mango

在上一篇博文中,我们构建了显示“GeeksForGeeks 很棒!”的入门应用程序。 text 并使用 React Native 平台学习了一些 JavaScript 代码。

但是在本机项目的低级代码中会发生什么?
因此,在深入研究 React Native 示例之前,让我们先了解底层代码中到底发生了什么。

React Native 应用程序中的线程

React Native App 中有 4 个线程:

1) UI 线程:也称为主线程。这用于原生 android 或 iOS UI 渲染。例如,在 android 中,此线程用于 android 测量/布局/绘制发生。

2) JS 线程: JS 线程或 Javascript 线程是运行逻辑的线程。例如,这是执行应用程序的 javascript 代码、进行 api 调用、处理触摸事件等等的线程。对原生视图的更新在 JS 线程中的每个事件循环结束时进行批处理并发送到原生端(并最终在 UI 线程中执行)。

为了保持良好的性能,JS 线程应该能够在下一帧渲染截止日期之前向 UI 线程发送批量更新。例如,iOS 每秒显示 60 帧,这导致每 16.67 毫秒产生新帧。如果您在 javascript 事件循环中进行了一些导致 UI 更改的复杂处理,并且花费的时间超过 16.67 毫秒,那么 UI 将显得缓慢。

一个例外是完全在 UI 线程中发生的原生视图,例如,navigatorIOS 或 scrollview 完全在 UI 线程中运行,因此不会因 js 线程慢而被阻塞。

3) 原生模块线程:有时应用程序需要访问平台 API,这作为原生模块线程的一部分发生。

4) 渲染线程:仅在 Android L (5.0) 中,react native 渲染线程用于生成用于绘制 UI 的实际 OpenGL 命令。

参与 React Native 工作的过程

1) 在应用程序第一次启动时,主线程开始执行并开始加载 JS 包。

2) JavaScript 代码加载成功后,主线程将其发送到另一个 JS 线程,因为当 JS 进行一些繁重的计算时,该线程会占用一段时间,UI 线程将不会受到任何影响。

3)当React开始渲染Reconciler开始“diffing”,当它生成一个新的虚拟DOM(布局)时,它会将变化发送到另一个线程(Shadow线程)。

4)Shadow 线程计算布局,然后将布局参数/对象发送到主(UI)线程。 (这里你可能想知道为什么我们称它为“阴影”?因为它会生成阴影节点)

5) 由于只有主线程能够在屏幕上渲染一些东西,影子线程应该将生成的布局发送到主线程,然后才渲染 UI。

React Native 的分离

通常,我们可以将 React Native 分为 3 部分:

1)React Native——原生端

2) React Native – JS 端

3) React Native – 桥接

这通常被称为“React Native 的 3 部分”