如何反应原生作品？

Question

有人可以解释原生作用的反应吗？

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

关于本机如何反应的谷歌搜索并没有真正帮助,但本文http://tadeuzagallo.com/blog/react-native-bridge解释了如何导出本机模块以及当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机器为您完成了很多繁重的工作，以便在您的应用程序中运行网页。页面加载缓慢，滚动抖动等等。这就是 Cordova 和 PhoneGap 应用程序运行不佳的原因。

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

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

3）这里，JavaScript虚拟机发挥了作用，它与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 命令以本机代码发送到 UiManager，以在异步线程上创建 UI，异步线程将这些命令添加到 MessageQueue 中并处理它们。

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

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

6）主题：

• JS-Thread ：如前所述处理 UI 命令。一旦您从 Android 代码调用 React-Native 视图（启动 React Activity），就会创建 JS 线程，并处理来自 React Native 的每个视图创建或更改命令。
• Native-Thread（主线程）：获取按下或触摸事件并将它们传递给 JS-VM，JS-VM 将它们传递给您的代码，如果成功，处理它们并将视图更改事件传递给您的 JS-Thread。
• 异步线程 现在我不太了解如何在 JS/JSX 代码中创建线程。也许这是可能的，但之前是不可能的。

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

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