react是一个核心框架，旨在构建基于响应式模式的组件，你可以把它看作是MVC中的V，尽管我想说的是，react确实带来了不同的感觉，特别是如果你不太熟悉响应式的概念。

ReactNative是另一层，旨在为Android和iOS平台提供一套常见的组件。所以代码看起来基本上与ReactJS相同，因为它是ReactJS，但它是在移动平台上原生加载的。你也可以根据操作系统将更复杂的和平台相关的API与Java/Objective-C/Swift连接起来，并在React中使用它。

有点晚了，但这里有一个更全面的答案，有例子:

反应

React是一个基于组件的UI库，它使用一个“影子DOM”来有效地更新DOM所更改的内容，而不是为每个更改重新构建整个DOM树。它最初是为web应用程序构建的，但现在也可以用于移动和3D/vr。

React和React Native之间的组件不能互换，因为React Native映射到原生移动UI元素，但业务逻辑和非渲染相关的代码可以重用。

ReactDOM

最初包含在React库中，但当React被用于其他平台而不仅仅是web时，它就被分离了。它作为DOM的入口点，并与React联合使用。

例子:

import React from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    state = {
        data: [],
    }

    componentDidMount() {
        const data = API.getData(); // fetch some data
        this.setState({ data })
    }

    clearData = () => {
        this.setState({
            data: [],
        });
    }

    render() {
        return (
            <div>
                {this.state.data.map((data) => (
                    <p key={data.id}>{data.label}</p>
                ))}
                <button onClick={this.clearData}>
                    Clear list
                </button>
            </div>
        );
    }

}

ReactDOM.render(App, document.getElementById('app'));

反应本地

React Native是一个跨平台的移动框架，它使用React，并通过“桥”在Javascript和它的本地对等物之间进行通信。因此，在使用React Native时，许多UI结构必须有所不同。例如:当构建一个列表时，如果你试图使用map来构建列表而不是React Native的FlatList，你会遇到主要的性能问题。React Native可以用来构建IOS/Android移动应用程序，也可以用于智能手表和电视。

Expo

当启动一个新的React Native应用程序时，Expo是首选。

Expo是一个通用React应用程序的框架和平台。它是一套围绕React Native和原生平台构建的工具和服务，可以帮助您开发、构建、部署和快速迭代iOS、Android和web应用程序

注意:当使用Expo时，你只能使用他们提供的原生Api。你所包含的所有附加库都需要是纯javascript，否则你将需要弹出expo。

使用React Native的相同示例:

import React, { Component } from 'react';
import { Flatlist, View, Text, StyleSheet } from 'react-native';

export default class App extends Component {
    state = {
        data: [],
    }

    componentDidMount() {
        const data = API.getData(); // fetch some data
        this.setState({ data })
    }

    clearData = () => {
        this.setState({
            data: [],
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <FlatList
                    data={this.state.data}
                    renderItem={({ item }) => <Text key={item.id}>{item.label}</Text>}
                />
                <Button title="Clear list" onPress={this.clearData}></Button>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});

差异:

Notice that everything outside of render can remain the same, this is why business logic/lifecycle logic code can be re-used across React and React Native In React Native all components need to be imported from react-native or another UI library Using certain API's that map to native components are usually going to be more performant than trying to handle everything on the javascript side. ex. mapping components to build a list vs using flatlist Subtle differences: things like onClick turn into onPress, React Native uses stylesheets to define styles in a more performant way, and React Native uses flexbox as the default layout structure to keep things responsive. Since there is no traditional "DOM" in React Native, only pure javascript libraries can be used across both React and React Native

React360

值得一提的是，React还可以用于开发3D/VR应用程序。组件结构与React Native非常相似。https://facebook.github.io/react-360/

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

反应

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得到了新的渲染器的支持。

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

以下是我所知道的不同之处:

它们有不同的html标签:React Native用于处理文本，而不是在React中。 React Native使用可触摸组件代替常规按钮 元素。 React Native有ScrollView和FlatList组件用于呈现列表。 React Native使用AsyncStorage，而React使用本地存储。 在React中，原生路由器的功能是堆栈，而在React中，我们使用Route组件进行映射导航。

React Native是一个JavaScript框架，它提供了编写多平台应用程序(如iOS或Android)所需的一切。

ReactJS是一个JavaScript库，用于构建web界面和构建您的网站。

我们无法准确地比较它们。用例中存在差异。

(2018更新)

---

反应

React的主要关注点是Web开发。

React’s virtual DOM is faster than the conventional full refresh model, since the virtual DOM refreshes only parts of the page. You can reuse code components in React, saving you a lot of time. (You can in React Native too.) As a business: The rendering of your pages completely, from the server to the browser will improve the SEO of your web app. It improves the debugging speed making your developer’s life easier. You can use hybrid mobile app development, like Cordova or Ionic, to build mobile apps with React, but is more efficiently building mobile apps with React Native from many points.

---

反应本地

React的扩展，针对移动开发。

Its main focus is all about Mobile User Interfaces. iOS & Android are covered. Reusable React Native UI components & modules allow hybrid apps to render natively. No need to overhaul your old app. All you have to do is add React Native UI components into your existing app’s code, without having to rewrite. Doesn't use HTML to render the app. Provides alternative components that work in a similar way, so it wouldn't be hard to understand them. Because your code doesn’t get rendered in an HTML page, this also means you won’t be able to reuse any libraries you previously used with React that renders any kind of HTML, SVG or Canvas. React Native is not made from web elements and can’t be styled in the same way. Goodbye CSS Animations!

---

希望我帮到你了:)