Javascript React Native 和 React 有什么区别？

What is the difference between React Native and React?

提问by shiva kumar

I have started to learn Reactout of curiosity and wanted to know the difference between React and React Native - though could not find a satisfactory answer using Google. React and React Native seems to have the same format. Do they have completely different syntax?

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

回答by Nader Dabit

ReactJSis a JavaScript library, supporting both front-end web and being run on a server, for building user interfaces and web applications.

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

React Nativeis a mobile framework that compiles to native app components, allowing you to build native mobile applications for different platforms (iOS, Android, and Windows Mobile) in JavaScript that allows you to use ReactJS to build your components, and implements ReactJS under the hood.

React Native是一个编译为原生应用程序组件的移动框架，允许您使用 JavaScript 构建适用于不同平台（iOS、Android 和 Windows Mobile）的原生移动应用程序，允许您使用 ReactJS 构建您的组件，并在兜帽。

Both follow the JSX syntax extension to JavaScript.

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

Both are open-sourced by Facebook.

两者都是由 Facebook 开源的。

回答by prosti

Here is the Reactproject.

这是React项目。

At Facebook, they invented Reactso JavaScript can manipulate the website DOM faster using the virtual DOM model.

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

DOM full refresh is slower compared to the React virtual-dom model, which refreshes only parts of the page (read: partial refresh).

与React virtual-dom 模型相比，DOM 完全刷新更慢，后者只刷新页面的一部分（阅读：部分刷新）。

As you may understand from this video, Facebook did not invent React because they understood immediately that the partial refresh would be faster than the conventional one. Originally they needed a way to reduce Facebook application re-build time and luckily this brought the partial DOM refresh to life.

正如您从这段视频中了解到的，Facebook 并没有发明 React，因为他们立即明白部分刷新会比传统刷新更快。最初，他们需要一种方法来减少 Facebook 应用程序的重新构建时间，幸运的是，这使部分 DOM 刷新得以实现。

React nativeis just a consequence of React. It is a platform to build native apps using JavaScript.

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

Prior to React nativeyou needed to know Java for Android or Objective-C for iPhone and iPad to create native apps.

在使用React Native之前，您需要了解适用于 Android 的 Java 或适用于 iPhone 和 iPad 的 Objective-C 才能创建本机应用程序。

With React Native it is possible to mimic the behavior of the native app in JavaScript and at the end, you will get platform specific code as the output. You may even mix the native codewith the JavaScript if you need to optimize your application further.

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

As Olivia Bishop said in the video, 85% of the React nativecode base can be shared among platforms. These would be the components applications typically use and the common logic.

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

15% of the code is platform specific. The platform-specific JavaScript is what gives the platform flavor ( and makes the difference in the experience ).

15% 的代码是特定于平台的。特定于平台的 JavaScript 赋予了平台风味（并使体验有所不同）。

The cool thing is this platform specific code — is already written, so you just need to use it.

很酷的是这个特定于平台的代码 - 已经编写好了，所以你只需要使用它。

回答by Alireza

React:

反应：

React is a declarative, efficient, and flexible JavaScript library for building user interfaces.

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

React Native:

反应原生：

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.
With React Native, you don't build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.
React Native lets you build your app faster. Instead of recompiling, you can reload your app instantly. With hot reloading, you can even run new code while retaining your application state. Give it a try - it's a magical experience.
React Native combines smoothly with components written in Objective-C, Java, or Swift. It's simple to drop down to native code if you need to optimize a few aspects of your application. It's also easy to build part of your app in React Native, and part of your app using native code directly - that's how the Facebook app works.

React Native 允许您仅使用 JavaScript 构建移动应用程序。它使用与 React 相同的设计，让您可以从声明性组件组成丰富的移动 UI。
使用 React Native，您无需构建“移动网络应用程序”、“HTML5 应用程序”或“混合应用程序”。您构建了一个真正的移动应用程序，它与使用 Objective-C 或 Java 构建的应用程序没有区别。React Native 使用与常规 iOS 和 Android 应用程序相同的基本 UI 构建块。您只需使用 JavaScript 和 React 将这些构建块放在一起。
React Native 可让您更快地构建应用程序。您可以立即重新加载您的应用程序，而不是重新编译。通过热重载，您甚至可以在保持应用程序状态的同时运行新代码。尝试一下 - 这是一次神奇的体验。
React Native 与用 Objective-C、Java 或 Swift 编写的组件顺利结合。如果您需要优化应用程序的某些方面，可以轻松下拉到本机代码。在 React Native 中构建应用程序的一部分以及直接使用本机代码构建应用程序的一部分也很容易 - 这就是 Facebook 应用程序的工作方式。

So basically Reactis UI library for the view of your web app, using javascriptand JSX, React nativeis an extra library on the top of React, to make a native app for iOSand Androiddevices.

所以基本上阵营是一种网络应用程序的角度来看，使用的UI库的JavaScript和JSX，阵营本土上发生反应顶部的额外库，使本机应用程序用于iOS与Android设备。

Reactcode sample:

反应代码示例：

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 Nativecode sample:

反应本机代码示例：

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>
    );
  }
}

For more information about React, visit their official website created by facebook team:

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

https://facebook.github.io/react

https://facebook.github.io/react

For more information about React Native, visit React native website below:

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

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

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

回答by vijayst

ReactJS is a framework for building an hierarchy of UI components. Each component has state and props. Data flows from the top to low-level components via props. The state is updated in the top-level component using event handlers.

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

React native uses React framework for building components for mobile apps. React native provides a basic set of components for both iOS and Android platforms. Some of the components in React Native are Navigator, TabBar, Text, TextInput, View, ScrollView. These components use native iOS UIKit and Android UI components internally. React native also allows NativeModules where code written in ObjectiveC for iOS and Java for Android can be used within JavaScript.

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

回答by Ryo-code

First, the similarities:Both React & React Native (RN) were designed to create flexible user interfaces. There are tons of benefits to these frameworks, but the most fundamental take-away is that they're made for UI-development. Facebook developed RN a few years after React.

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

React:Facebook designed this framework to be almost like writing your JavaScript inside of your HTML/XML, which is why the tags are called "JSX" (JavaScript XML) and are similar to the familiar HTML-like tags such as <div>or <p>. A hallmark of React is the capital-letter tags which denote a custom component, such as <MyFancyNavbar />, which also exists in RN. However, React uses the DOM. The DOM exists for HTML, thus React is used for web development.

React：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.viewon Android; and UIViewon iOS).

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

In short: they're very similar (for UI development) but used for different mediums.

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

回答by Анураг Пракаш

1. React-Native is a framework for developing Android & iOS applications which shares 80% - 90% of Javascript code.

1. React-Native 是一个用于开发 Android 和 iOS 应用程序的框架，它共享 80% - 90% 的 Javascript 代码。

While React.js is a parent Javascript library for developing web applications.

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

1. While you use tags like <View>, <Text>very frequently in React-Native, React.js uses web html tags like <div><h1><h2>, which are only synonyms in dictionary of web/mobile developments.

2. For React.js you need DOM for path rendering of html tags, while for mobile application: React-Native uses AppRegistry to register your app.

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

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

I hope this is an easy explanation for quick differences/similarities in React.js and React-Native.

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

回答by Adrian Gheorghe

We can't compare them exactly. There are differences in use case.

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

(2018 update)

（2018年更新）

---

---

ReactJS

ReactJS

React has as its main focus Web Development.

React 的主要重点是Web 开发。

1. • React's virtual DOM is faster than the conventional full refresh model, since the virtual DOM refreshes only parts of the page.
2. • You can reuse code componentsin React, saving you a lot of time. (You can in React Native too.)
3. • As a business: The rendering of your pages completely, from the server to the browser will improve the SEO of your web app.
4. • It improves the debugging speedmaking your developer's life easier.
5. • 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.

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

---

---

React Native

反应本机

An extension of React, niched on Mobile Development.

React 的扩展，专注于移动开发。

1. • Its main focus is all about Mobile User Interfaces.
2. • iOS & Androidare covered.
3. • ReusableReact Native UI components & modulesallow hybrid apps to render natively.
4. • 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.
5. • 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.
6. • 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 Reactthat renders any kind of HTML, SVG or Canvas.
7. • React Native is not made from web elements and can't be styled in the same way. Goodbye CSS Animations!

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 动画！

---

---

Hopefully I helped you :)

希望我能帮到你 :)

回答by Manzoor Samad

In a simple sense, React and React native follows the same design principles except in the case of designing user interface.

简单来说，React 和 React Native 遵循相同的设计原则，除了设计用户界面的情况。

1. React native has a separate set of tags for defining user interface for mobile, but both use JSX for defining components.
2. Both systems main intention is to develop re-usable UI-components and reduce development effort by its compositions.
3. If you plan & structure code properly you can use the same business logic for mobile and web

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

Anyway, it's an excellent library to build user interface for mobile and web.

无论如何，它是为移动和网络构建用户界面的优秀库。

回答by Bipon Biswas

React is a declarative, efficient, and flexible JavaScript library for building user interfaces.Your components tell React what you want to render – then React will efficiently update and render just the right components when your data changes. Here, ShoppingList is a React component class, or React component type.

React 是一个声明式、高效且灵活的 JavaScript 库，用于构建用户界面。你的组件告诉 React 你想要渲染什么——然后当你的数据发生变化时，React 将有效地更新和渲染正确的组件。在这里， ShoppingList 是一个 React 组件类，或者 React 组件类型。

A React Native app is a real mobile app. With React Native, you don't build a “mobile web app”, an “HTML5 app”, or a “hybrid app”. You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps.

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

More info

更多信息

回答by Necronet

ReactJS is a core framework, meant to build component isolated based on reactive pattern, you can think of it as the V from MVC, although I would like to state that react does brings a different feel, specially if you are less familiar with reactive concept.

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

ReactNative is another layer that is meant to have a set component for Android and iOS platform that are common. So the code looks basically the same as ReactJS because is ReactJS, but it load natively in mobile platforms. You can also bridge more complex and platform relative API with Java/Objective-C/Swift depending on the OS and use it within React.

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