React is a framework for building applications using JavaScript. React Native is an entire platform allowing you to build native, cross-platform mobile apps, and React.js is a JavaScript library you use for constructing a high performing UI layer. React.js is the heart of React Native, and it embodies all React’s principles and syntax, so the learning curve is easy. The platform is what gave rise to their technical differences. Like the browser code in React is rendered through Virtual DOM while React Native uses Native API’s to render components on mobile. React uses HTML and with React Native, you need to familiarize yourself with React Native syntax. React Native doesn’t use CSS either. This means you’ll have to use the animated API which comes with React Native to animate different components of your application.

最重要的是，React是为你的web界面构建动态，高性能，响应性UI的理想选择，而React Native是为了给你的移动应用程序一个真正的原生感觉。

雷夫:what-is-the-difference-between-react-js-and-react-native

我知道已经有很多答案了，但在读完这些之后，我觉得没有人能解释这两者之间的架构差异以及它们是如何工作的，所以我相信仍然有解释的空间。

反应

React = vanilla js + es6 + HTML + CSS = jsx = Web apps（前端）

所以让我们先谈谈React，因为React- native也是基于React的，并且在那里使用了相同的JS概念。

React是一个JS库，用于制作漂亮的，灵活的，高性能的单页web应用程序，所以现在一个问题会出现在你的脑海中什么是单页web应用程序?

单页面应用程序

A single-page application is an app that works inside a browser and does not require page reloading during use. You are using these types of applications every day. These are, for instance: Gmail, Google Maps, Facebook, or GitHub. SPAs are all about serving an outstanding UX by trying to imitate a “natural” environment in the browser — no page reloads, no extra wait time. It is just one web page that you visit which then loads all other content using JavaScript — which they heavily depend on. SPA requests the markup and data independently and renders pages straight in the browser. We can do this thanks to advanced JavaScript frameworks like AngularJS, Ember.js, Meteor.js, Knockout.js, React.js, and Vue.js. Single-page sites help keep the user in one, comfortable web space where content is presented to the user in a simple, easy, and workable fashion.

它是如何工作的

现在你知道SPA是什么了，你知道它是一个web应用程序，所以它会使用HTML元素运行到浏览器中，也会使用JS来处理所有与这些元素相关的功能。 它使用Virtual DOM来呈现组件中的新更改。

React-Native

现在你对react有了一点了解，我们来谈谈react-native

React-Native = React(香草JS + ES6 + JS和本机代码之间的桥梁)+ Native(iOS, Android) =移动应用程序(Android, iOS，也支持web，但有一些限制)

React- native用于使用React制作漂亮的跨平台移动应用程序(Android, iOS)。

它是如何工作的

在React-Native中有两个线程。

JS线程 本机线程

所有的React代码都在JS线程中执行，最终值传递给本机线程，该线程在屏幕上用最终值绘制布局。

JS线程执行所有的计算和传递数据到本机，如何?

React使用Async Bridge以JSON格式将数据传递给Native线程，称为React-Native

注意:新的体系结构不再依赖于桥，它使用JSI和fabric来进行本机代码和JS代码之间的同步通信(这将在下一节中解释)。

因此，我们使用本机组件在react-native中创建表示视图，并使用该桥梁在这两个不同的世界之间进行通信。

JS线程足够快，可以执行JavaScript，本地线程也足够快，可以执行本地代码，但由于React使用异步桥接在这两个世界之间通信，重载这个桥接会导致性能问题。

更新: React-Native现在正在经历一个重新架构的阶段，Facebook团队正试图删除异步桥，以同步地在JS和本机之间通信，这个重新架构的主要部分是JSI(Javascript接口)和结构。

JSI: JSI消除了本地(Java/ObjC)和Javascript代码之间桥梁的需要。它还消除了将所有信息序列化/反序列化为JSON的需求，以便在两个世界之间进行通信。JSI通过将javascript和本地世界结合在一起，为新的可能性打开了大门。

下面是JSI提供的主要功能。

Javascript Interface which allows us to register methods with the Javascript runtime. These methods are available via the global object in the Javascript world. The methods can be entirely written in C++ or they can be a way to communicate with Objective C code on iOS and Java code on Android. Any native module that is currently using the traditional bridge for communication between Javascript and the native worlds can be converted to a JSI module by writing a simple layer in C++ On iOS writing, this layer is simple because C++ can run directly in Objective C hence all the iOS frameworks and code is available to use now. On android however we have to go the extra mile to do this through JNI. These methods can be fully synchronous which means using async/await is not mandatory.

Fabric:根据文档，Fabric是一个新的UI层，允许我们与本地UI组件同步通信。

Fabric是React Native的新渲染系统，是遗留渲染系统的概念进化。核心原则是在c++中统一更多的呈现逻辑，提高与主机平台的互操作性，并为React Native解锁新功能。开发始于2018年和2021年，Facebook应用程序中的React Native得到了新的渲染器的支持。

让我们来谈谈这两个框架的共同点和不同点。

反应

React is used for creating websites, web apps, SPAs etc. React is a Javascript library used for creating UI hierarchy. It is responsible for rendering of UI components, It is considered as V part Of MVC framework. React’s virtual DOM is faster than the conventional full refresh model, since the virtual DOM refreshes only parts of the page, Thus decreasing the page refresh time. React uses components as basic unit of UI which can be reused this saves coding time. Simple and easy to learn. React Native React Native is a framework that is used to create cross-platform Native apps. It means you can create native apps and the same app will run on Android and ios. React native have all the benefits of ReactJS React native allows developers to create native apps in web-style approach.

在Reactjs中，虚拟DOM用于在Reactjs中渲染浏览器代码，而在React Native中，本地api用于渲染移动设备中的组件。

用Reactjs开发的应用程序在UI中渲染HTML，而React Native使用JSX来渲染UI，这只是javascript。

首先是相似之处:React和React Native (RN)都是为了创建灵活的用户界面而设计的。这些框架有很多好处，但最基本的一点是它们是为ui开发而设计的。Facebook在React之后几年开发了RN。

反应: Facebook设计的这个框架几乎就像在HTML/XML中编写JavaScript，这就是为什么标签被称为“JSX”(JavaScript XML)，类似于我们熟悉的类似HTML的标签，如<div>或<p>。React的一个标志是大写字母标记，它表示自定义组件，例如<MyFancyNavbar />，它也存在于RN中。然而，React使用DOM。DOM是为HTML而存在的，因此React是用于web开发的。

React Native: RN does not use HTML, and therefore is not used for web development. It is used for... virtually everything else! Mobile development (both iOS & Android), smart-devices (e.g. watches, TVs), augmented reality, etc. As RN has no DOM to interact with, instead of using the same sort of HTML tags used in React, it uses its own tags which are then compiled into other languages. For example, instead of <div> tags, RN developers use RN's built-in <View> tag, which compiles into other native code under the hood (e.g. android.view on Android; and UIView on iOS).

简而言之:它们非常相似(对于UI开发)，但用于不同的媒介。

React用于在浏览器中工作的web应用程序。 React Native用于android和IOS应用程序，这些应用程序在移动应用程序中工作。