协慌网

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

ReactJS是一个 JavaScript 库，它支持前端 Web 并在服务器上运行，用于构建用户界面和 Web 应用程序。它遵循可重用组件的概念。

React Native是一个移动框架，它利用主机上可用的 JavaScript 引擎，使您可以使用 JavaScript 构建适用于不同平台（iOS，Android 和 Windows Mobile）的移动应用程序，从而允许您使用 ReactJS 来构建可重用的组件并进行通信带有本机组件的进一步说明

两者都遵循 JavaScript 的 JSX 语法扩展。可以在React.createElement编译为 React.createElement 调用。 JSX 深入

两者均由 Facebook 开源。

反应：

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

React Native：

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

因此，基本上， 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

首先，相似之处： 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 标签，而是使用自己的标签，然后将其编译成其他语言。例如，RN 开发人员使用 RN 的内置<View> <div>标签，该标签可在后台编译为其他本机代码（例如，Android 上的android.view UIView

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