react-native - react native 是如何工作的？

Question

关闭。这个问题需要更多 focused .它目前不接受答案。












想改进这个问题？更新问题，使其仅关注一个问题 editing this post .

1年前关闭。




Improve this question




有人可以解释一下 react native 的工作原理吗？

找到了很多关于入门、组件使用、导出模块的好文章。但是，

谷歌搜索 react native 是如何工作的 并没有真正的帮助，但这篇文章 http://tadeuzagallo.com/blog/react-native-bridge这解释了如何导出 native 模块以及 javascript 调用它们时会发生什么。

..我仍然觉得很难理解(作为一个 javascript 开发人员)像，
第一次渲染是如何在屏幕上发生的，这 3 个线程的功能是什么以及它们如何相互通信，这个 javascript 事件循环是什么，为什么我们需要批处理调用以及它是如何批处理的，等等。

有人可以从 javascript 开发人员的角度分享一篇文章/解释它吗？

谢谢!

Answer 1

我将尝试描述 React Native 的工作原理。这有点复杂。

首先我想推荐这个 URL 来了解 React Native 的基本内部机制:

阅读:https://www.reactnative.guide/3-react-native-internals/3.1-react-native-internals.html

因此，您正在使用 JS/JSX (JavaScript) 或 TS/TSX (TypeScript) 编写代码，但 Android 主要使用 Java(为了这个答案，我们现在知道它是 Kotlin)，而 iOS 使用 Swift/Objective-C，那么 java 脚本如何代码在您的 Java 虚拟机或 Dalvik 虚拟机或任何 iOS 使用中运行。

所以这里是如何在 Android 机器(iOS 机器)中运行 JavaScript 代码的问题，

1) 使用 WebView，但是 WebView 很慢，WebView 中发生了很多事情，Android/IOS 机器为您完成了很多繁重的工作，以便在您的应用程序中运行网页。页面加载缓慢，滚动 SCSS 等等。这就是 Cordova 和 PhoneGap 应用程序无法正常运行的原因。

2)我们不需要WebView，我们需要轻量级的JavaScript编译器(解释器)，它只能编译一组JS指令而不是全部。仅针对核心 JavaScript 并读取新定义的 XML/ReactNative 标记的程序。 React-Native 标签(Image、FlatList、Text 等)在 JS 端转换，并在 Android/IOS 端转换为 JS 方法调用。

阅读:https://reactjs.org/docs/react-without-jsx.html
JSX 先转换成 JS。

3)在这里，JavaScript-Virtual Machine 发挥作用，它与 JVM 或 DVM 完全不同。并且可以在JVM或DVM上运行。

React Native 使用:JavaScriptCore

阅读:https://www.raywenderlich.com/1227-javascriptcore-tutorial-for-ios-getting-started (这是针对IOS的)

这是一个开源的供您环顾四周

https://github.com/LiquidPlayer/LiquidCore : 这甚至包含一个文件系统，react-native 没有。

注意:同样的想法 FB 用于 NodeJs = 后端 JavaScript。

4) JS-Bundle:所以现在你可以在你的应用程序中运行 JS 代码，但是你如何发布它。您将创建一个文件，即将所有文件和库文件合并为一个文件，并将其命名为 JS-Bundle。

Android的简单命令

node node_modules/react-native/local-cli/cli.js bundle --entry-file index.js --platform android --bundle-output ../jsbundle/index.android.jsbundle --assets-dest ../jsbundle/res

5) JS-Bridge:就像名字一样提供了桥接方法和组件来通信JavaScript和Native-Code(Android Java)。他们如何使用 JSON 进行通信，就像 React-Native 中的其他所有内容一样。 JSON 命令以 native 代码发送到 UiManager 以在异步线程上创建 UI，该线程将这些命令添加到 MessageQueue 并处理它们。

阅读: https://hackernoon.com/understanding-react-native-bridge-concept-e9526066ddb8

另请阅读: https://tadeuzagallo.com/blog/react-native-bridge/

6)线程:

JS-Thread :如前所述处理 UI 命令。 JS线程是
从 Android 代码(启动 React Activity)调用 React-Native View 并处理来自 React Native 的每个 View 创建或更改命令时创建。

Native-Thread(主线程):获取按下或触摸事件并将它们传递给 JS-VM，
JS-VM 将它们传递给您的代码，如果成功，则处理它们并将 View 更改事件传递给您的 JS-Thread。

Async-Threads 现在我不太了解如何在 JS/JSX 代码中创建线程。也许这是可能的，但之前不是。

因此，从 JS 角度来看，您编写的 JS 代码将在 ReactView 轻量级浏览器上运行。

阅读: https://www.codementor.io/@saketkumar95/how-react-native-works-mhjo4k6f3