我已经出于好奇而开始学习React，并且想知道React和React Native之间的区别-尽管使用Google找不到满意的答案。React和React Native似乎具有相同的格式。它们的语法完全不同吗？

ReactJS是一个JavaScript库，它支持前端Web并在服务器上运行，用于构建用户界面和Web应用程序。

React Native是一个可编译为本机应用程序组件的移动框架，允许您使用JavaScript构建适用于不同平台（iOS，Android和Windows Mobile）的本机移动应用程序，从而允许您使用ReactJS来构建组件，并在罩。

两者都遵循JavaScript的JSX语法扩展。

两者都是Facebook开源的。

这是React项目。

在Facebook，他们发明了React因此JavaScript可以使用虚拟DOM模型更快地操作网站DOM。

与React虚拟dom模型相比，DOM完全刷新速度较慢，后者仅刷新页面的一部分（阅读：部分刷新）。

正如您从该视频中所了解的那样，Facebook并未发明React，因为他们立即了解到部分刷新将比传统刷新更快。最初，他们需要一种减少Facebook应用程序重建时间的方法，幸运的是，这使部分DOM焕然一新。

React native只是React的结果。这是一个使用JavaScript构建本机应用程序的平台。

在使用React native之前，您需要了解Android的Java或iPhone和iPad的Objective-C才能创建本地应用。

使用React Native，可以模仿JavaScript中本机应用程序的行为，最后，您将获得平台特定的代码作为输出。您甚至可以混合本机代码如果您需要进一步优化应用程序，与JavaScript使用。

正如Olivia Bishop在视频中所说，React本机代码库的85％可以在平台之间共享。这些将是应用程序通常使用的组件和通用逻辑。

15％的代码是特定于平台的。特定于平台的JavaScript赋予了平台风味（并带来了与众不同的体验）。

最酷的是该平台特定的代码-已经编写好了，因此您只需要使用它即可。

反应：

React是用于构建用户界面的声明性，高效且灵活的JavaScript库。

React Native：

React Native可让您仅使用JavaScript构建移动应用程序。它使用与React相同的设计，使您可以从声明性组件组成丰富的移动UI。React Native与用Objective-C，Java或Swift编写的组件完美地结合在一起。如果您需要优化应用程序的某些方面，那么很简单地使用本机代码。在React Native中构建应用程序的一部分也很容易，而直接使用本机代码构建应用程序的一部分也很容易-这就是Facebook应用程序的工作方式。
使用React Native，您无需构建“移动Web应用程序”，“ HTML5应用程序”或“混合应用程序”。您构建的真实移动应用程序与使用Objective-C或Java构建的应用程序没有区别。React Native使用与常规iOS和Android应用程序相同的基本UI构建块。您只需使用JavaScript和React将这些构建块放在一起。
React Native使您可以更快地构建应用程序。无需重新编译，您可以立即重新加载应用程序。通过热重装，您甚至可以在保留应用程序状态的同时运行新代码。试试看-这是一种神奇的体验。

因此，基本上，React是使用javascript和JSX的 Web应用程序视图的UI库，React native是React顶部的一个额外库，用于为iOS和Android设备制作本机应用程序。

反应代码示例：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

React Native代码示例：

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

class WhyReactNativeIsSoGreat extends Component {
  render() {
    return (
      <View>
        <Text>
          If you like React on the web, you'll like React Native.
        </Text>
        <Text>
          You just use native components like 'View' and 'Text',
          instead of web components like 'div' and 'span'.
        </Text>
      </View>
    );
  }
}

有关React的更多信息，请访问由facebook团队创建的官方网站：

https://facebook.github.io/react

有关React Native的更多信息，请访问下面的React native网站：

https://facebook.github.io/react-native

ReactJS是用于构建UI组件层次结构的框架。每个组件都有状态和道具。数据通过道具从顶层流向底层组件。使用事件处理程序在顶级组件中更新状态。

React native使用React框架为移动应用程序构建组件。React native提供了适用于iOS和Android平台的一组基本组件。React Native中的一些组件是Navigator，TabBar，Text，TextInput，View，ScrollView。这些组件在内部使用本机iOS UIKit和Android UI组件。React native还允许使用NativeModules，在JavaScript中可以使用用iOS的ObjectiveC和Android的Java编写的代码。

首先，相似之处： React和React Native（RN）均旨在创建灵活的用户界面。这些框架有很多好处，但是最根本的收获是它们是用于UI开发的。在React之后的几年，Facebook开发了RN。

React： Facebook设计该框架的方式几乎就像在HTML / XML内编写JavaScript，这就是为什么标记被称为“ JSX ”（JavaScript XML）并且类似于类似HTML的标记（例如<div>或）的原因<p>。React的标志是大写字母标签，它表示定制组件，例如<MyFancyNavbar />，也存在于RN中。但是，React使用DOM。DOM用于HTML，因此React用于Web开发。

React Native： RN不使用HTML，因此不用于Web开发。它用于...几乎所有其他用途！移动开发（iOS和Android），智能设备（例如手表，电视），增强现实等。由于RN没有与之交互的DOM，因此它使用自己的React，而不是使用相同类型的HTML标签。标签，然后将其编译成其他语言。例如，<div>RN开发人员使用RN的内置标签代替标签，该<View>标签内置于引擎盖下的其他本机代码中（例如，android.view在Android和UIViewiOS上）。

简而言之：它们非常相似（用于UI开发），但是用于不同的介质。

1. React-Native是用于开发Android和iOS应用程序的框架，该框架共享Java代码的80％-90％。

React.js是用于开发Web应用程序的父Javascript库。

2. 当你使用像标签<View>，<Text>非常频繁的阵营本地的，React.js使用网页html标签一样<div> <h1> <h2>，这是只有在网络/移动开发字典同义词。

3. 对于React.js，您需要DOM来呈现html标签的路径，而对于移动应用程序：React-Native使用AppRegistry来注册您的应用程序。

我希望这是React.js和React-Native中快速差异/相似之处的简单解释。

我们无法精确比较它们。用例存在差异。

（2018年更新）

ReactJS

React主要关注Web开发。

1. • 由于虚拟DOM仅刷新页面的一部分，因此React的虚拟DOM比常规的完整刷新模型要快。
2. • 您可以在React中重用代码组件，从而节省大量时间。（您也可以在React Native中。）
3. • 作为一家企业：从服务器到浏览器完全呈现页面，将改善Web应用程序的SEO。
4. • 它提高了调试速度，使您的开发人员的生活更加轻松。
5. • 您可以使用混合移动应用程序开发（例如Cordova或Ionic）来使用React构建移动应用程序，但是从许多方面来看，它可以更有效地使用React Native来构建移动应用程序。

反应本机

React的扩展，紧随移动开发。

1. • 它的主要重点是关于移动用户界面。
2. • 涵盖了iOS和Android。
3. • 可重用的 React Native UI 组件和模块允许混合应用程序本地渲染。
4. • 无需检修您的旧应用程序。您所要做的就是将React Native UI组件添加到现有应用程序的代码中，而无需重写。
5. • 不使用HTML呈现应用程序。提供以类似方式工作的替代组件，因此您不难理解它们。
6. • 因为您的代码无法在HTML页面中呈现，这也意味着您将无法重用以前与React一起使用的任何可呈现任何HTML，SVG或Canvas的库。
7. • React Native不是由Web元素制成的，并且不能以相同的方式设置样式。再见CSS动画！

希望我能帮到你:)

简而言之，React和React native遵循相同的设计原则，但在设计用户界面时除外。

1. React native有一组单独的标签来定义移动用户界面，但是都使用JSX来定义组件。
2. 两种系统的主要目的都是开发可重用的UI组件，并通过其组成减少开发工作量。
3. 如果您正确计划和构建代码，则可以对移动设备和Web使用相同的业务逻辑

无论如何，它是构建移动和Web用户界面的出色库。

React是用于构建用户界面的声明性，高效且灵活的JavaScript库。您的组件会告诉React您要呈现的内容–然后，当数据更改时，React会高效地更新和呈现正确的组件。在这里，ShoppingList是一个React组件类或React组件类型。

React Native应用程序是一个真正的移动应用程序。使用React Native，您无需构建“移动Web应用程序”，“ HTML5应用程序”或“混合应用程序”。您构建的真实移动应用程序与使用Objective-C或Java构建的应用程序没有区别。React Native使用与常规iOS和Android应用程序相同的基本UI构建块。

更多信息

ReactJS是一个核心框架，旨在构建基于反应式模式隔离的组件，您可以将其视为MVC中的V，尽管我想指出一下React确实带来了不同的感受，特别是如果您对反应式概念不太熟悉的话。

ReactNative是另一层，旨在为Android和iOS平台提供一组通用的组件。因此，代码看起来与ReactJS基本相同，因为它是ReactJS，但它是在移动平台中本地加载的。您还可以根据操作系统在Java / Objective-C / Swift中桥接更复杂和平台相关的API，并在React中使用它。

反应本机主要是用JavaScript开发的，这意味着您需要入门的大多数代码都可以在平台之间共享。React Native将使用本机组件进行渲染。React Native应用程序是用它所针对的平台，iOS的Objective-C或Swift，Android的Java等语言开发的。所编写的代码不会在各个平台之间共享，并且它们的行为也各不相同。他们可以不受限制地直接访问平台提供的所有功能。

React是Facebook开发的用于构建用户界面的开源JavaScript库。它用于处理Web和移动应用程序的视图层。ReactJS用于创建可重用的UI组件，它是当前it领域中最受欢迎的JavaScript库之一，它具有强大的基础和庞大的社区。如果您学习ReactJS，则需要具备JavaScript，HTML5和CSS的知识。

React是React Native和React DOM的基本抽象，因此，如果要使用React Native，则还需要React ...与Web相同，但是要使用React Native，则需要React DOM。

由于React是基础抽象，因此一般语法和工作流程相同，但是您将使用的组件非常不同，因此您将需要学习这些差异，这与React内联，即所谓的moto，即“在任何地方学习一次写入”，因为您知道React（base abstraction），您可以简单地了解平台之间的差异，而无需学习其他编程语言，语法和工作流程。

React-Native是一个框架，其中ReactJS是可用于您的网站的javascript库。

React-native提供默认的核心组件（图像，文本），其中React提供了很多组件并使它们协同工作。

React Js是一个Javascript库，您可以在其中使用React来开发和运行更快的Web应用程序。

React Native允许您仅使用JavaScript构建移动应用程序，用于移动应用程序开发。更多信息在这里https://facebook.github.io/react-native/docs/getting-started.html

关于组件生命周期以及所有其他方面，它几乎是相同的。

区别主要是所使用的JSX标记。React使用类似于html的脚本。另一个是标记，react-native使用该标记显示视图。

React Native适用于移动应用程序，而React适用于网站（前端）。两者都是Facebook发明的框架。React Native是一个跨平台开发框架，意味着可以为IOS和Android编写几乎相同的代码，并且可以正常工作。我个人对React Native的了解更多，因此我将不做介绍。

React Js正在使用HTML Dom。但是React native正在使用移动（iOS / android）本机ui组件进行操作。

ReactJS是一个JavaScript库，用于构建Web界面。您将需要像webpack这样的捆绑器，并尝试安装构建网站所需的模块。

React Native是一个javascript框架，它包含编写多平台应用程序（如iOS或Android）所需的一切。您需要安装xcode和android studio才能构建和部署您的应用。

与ReactJS不同，React-Native不使用HTML，而是可以在ios和android上使用的相似组件来构建应用。这些组件使用真正的本机组件来构建ios和android应用。因此，与其他Hybrid开发平台不同，React-Native应用程序感觉真实。组件还可以提高代码的可重用性，因为您无需在ios和android上再次创建相同的用户界面。

简单来说，ReactJS是父库，它根据主机环境（浏览器，移动设备，服务器，桌面等）返回要渲染的内容。除了渲染外，它还提供其他方法，例如生命周期挂钩等。

在浏览器中，它使用另一个库react-dom来呈现DOM元素。在移动设备中，它使用React-Native组件来呈现特定于平台的（IOS和Android）本地UI组件。所以，

react + react-dom =网站开发

反应+本机=移动发展

REACT是Javascript库，用于构建诸如Facebook之类的大型/小型界面Web应用程序。

反应本机是Javascript框架，用于在Android，IOS和Windows Phone上开发本机移动应用程序。

两者均由Facebook开源。

这是我所了解的差异：

1. 它们具有不同的html标签：React Native用于处理文本，而不是在React中。
2. React Native使用的是Touchable组件，而不是常规的按钮元素。
3. React Native具有用于呈现列表的ScrollView和FlatList组件。
4. React Native使用AsyncStorage，而React使用本地存储。
5. 在React Native路由器中，它充当堆栈，而在React中，我们使用Route组件进行映射导航。

总结：React.js用于Web开发，而React-Native用于移动应用程序开发

ReactJS

• React用于创建网站，Web应用程序，SPA等。
• React是用于创建UI层次结构的Javascript库。
• 它负责UI组件的呈现，被视为MVC框架的V部分。
• 由于虚拟DOM仅刷新页面的一部分，因此React的虚拟DOM比常规的完全刷新模型要快，从而减少了页面刷新时间。
• React使用组件作为UI的基本单位，可以重复使用这节省了编码时间。简单易学。

反应本机

• React Native是一个用于创建跨平台本机应用程序的框架。这意味着您可以创建本机应用程序，并且同一应用程序将在Android和ios上运行。
• React native具有ReactJS的所有优点
• React native允许开发人员以网络风格的方式创建本地应用。
• 前端开发人员可以轻松地成为移动开发人员。

React Js -React JS是前端javascript库，它是大型库而不是框架

• 它遵循基于组件的方法，有助于构建
  可重用的UI组件
  • 它用于开发复杂的交互式Web和移动UI
  • 即使仅在2015年才开源，它还是支持它的最大社区之一。

ReactNative -React Native是一个开源移动应用程序框架。

派对晚了一点，但是这里有一些例子更全面的答案：

反应

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移动应用程序以及智能手表和电视。

世博会

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

Expo是通用React应用程序的框架和平台。它是围绕React Native和本机平台构建的一组工具和服务，可帮助您在iOS，Android和Web应用程序上开发，构建，部署和快速迭代

注意：使用Expo时，只能使用它们提供的Native 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,
    },
});

差异：

• 请注意，渲染之外的所有内容都可以保持不变，这就是为什么可以在React和React Native之间重用业务逻辑/生命周期逻辑代码的原因
• 在React Native中，所有组件都需要从react-native或另一个UI库导入
• 使用某些映射到本机组件的API通常会比尝试处理javascript方面的所有功能更具性能。例如 映射组件以构建列表与使用平面列表
• 细微的差异：诸如onClickturn into之类的东西onPress，React Native使用样式表以更高效的方式定义样式，而React Native使用flexbox作为默认布局结构来保持事物的响应速度。
• 由于React Native中没有传统的“ DOM”，因此只能在React和React Native中使用纯JavaScript库

React360

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

reactjs使用react-dom而不是浏览器dom，而react native使用虚拟dom，但是两者使用相同的语法，即如果可以使用reactjs，则可以使用react native。因为在reactjs中使用的大多数库都可以在react native中使用像您的反应导航和它们共有的其他常见库。

为了回应来自@poshest的评论，这是先前在React中发布的Clock代码的React Native版本（对不起，我无法直接在该部分发表评论，否则我将在其中添加代码）：

反应本机代码示例

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

class Clock extends Component {
  constructor(props) {
    super(props);
    this.state = { date: new Date() };
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.sectionTitle}>Hello, world!</Text>
        <Text style={styles.sectionDescription}>It is {this.state.date.toLocaleTimeString()}.</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flex: 1,
    justifyContent: 'center',
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: 'black',
    alignSelf: 'center',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: 'darkgrey',
    alignSelf: 'center',
  },
});

AppRegistry.registerComponent("clock", () => Clock);

请注意，样式完全是我的选择，并不试图直接复制React代码中使用的<h1>和<h2>标签。

一些区别如下：
1- React-Native是用于创建Mobile Apps的框架，其中ReactJS是可用于网站的javascript库。
2- React-Native在使用React时不使用HTML渲染应用程序。
3- React-Native仅用于开发Mobile App，而React用于网站和Mobile。

反应本机

• 它是使用JavaScript构建本机应用程序的框架。

• 它可以编译为本机应用程序组件，这使您可以构建本机移动应用程序。

• 无需检修您的旧应用程序。您所要做的就是将React Native UI组件添加到现有应用程序的代码中，而无需重写。

React JS

• 它支持前端Web并在服务器上运行，以构建用户界面和Web应用程序。

• 它还允许我们创建可重用的UI组件。

• 您可以在React JS中重用代码组件，从而节省大量时间。

React.js通常被称为React或ReactJS是一个JavaScript库，负责构建UI组件的层次结构，或者换句话说，负责UI组件的呈现。它同时支持前端和服务器端。

React Native是使用JavaScript构建本机应用程序的框架。React Native会编译为本地应用程序组件，这使您可以构建本地移动应用程序。在React JS中，React是Web平台的React DOM的基础抽象，而对于React Native，React仍然是React Native的基础抽象。因此，语法和工作流程保持相似，但是组件不同。