Question

有人可以解释一下原生的反应吗？

发现了很多关于入门，组件使用，导出模块的好文章..但是，

关于原生作品的反应的Google搜索并不能提供帮助，但本文http://tadeuzagallo.com/blog/react-native-bridge解释了如何导出原生模块以及javascript调用它们时会发生什么。

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

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

谢谢！

Answer 1

我在ReactNative网站上浏览了这个link。

它提供了为什么性能需要批量调用的原因，以及在每次js事件循环迭代后发送更改。

此外，youtube还有一些信息性视频。

Answer 2

我将尝试描述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 Machine（iOS计算机）中运行JavaScript代码的问题，

1）使用WebView，但是WebView速度很慢，WebView中发生了很多事情，因此Android / IOS机器为您完成了很多繁重的工作来在您的应用程序中运行Web页面。页面加载缓慢，滚动抖动，但没有。这就是为什么Cordova和PhoneGap应用程序无法正常工作的原因。

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

阅读：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不包含。

注意：用于NodeJs的相同想法FB =后端JavaScript。

4）JS-Bundle：现在，您可以在应用程序中运行JS代码，但如何发货。您将创建一个文件，即将所有文件和库文件合并为一个文件，并将其命名为JS捆绑包。

适用于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和本机代码（Android Java）。他们如何像React-Native一样使用JSON进行交流。 JSON命令以本机代码发送到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视图并立即创建并处理来自React Native的每个视图创建或更改命令后创建。
本机线程（主线程）：记录新闻或触摸事件，并将其传递给JS-VM， JS-VM将它们传递给您的代码，如果成功，则对其进行处理并将View更改事件传递给您的JS-Thread。
异步线程现在，我对如何在JS / JSX代码中创建线程不怎么了解。也许有可能，但在那之前是不可能的。

因此，对于JS点视图，您编写的JS代码将在轻量级浏览器ReactView上运行。

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

如何反应原生作品？

2 个答案: