logo标签列表

React Native和React有什么区别？

javascriptreactjsreact-nativejavascript-framework
925

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

110
很多人在被问及这个问题时都给出了一个字典式的回答，而大多数人只是想知道它们是否可以互换使用：在将 React 代码移植到 React Native 上有多容易？如果你想在 iPad 上使用它，你需要将 Web 应用程序的前端重写为不同的 React 代码吗？它们之间有何不同？ - Lawrence Weru
39
React Native 可以构建适用于 iOS、Android 和 Windows Mobile 的移动应用程序，你可以编译并放置在应用商店供用户安装。而 ReactJS 用于构建网页，用于在 web 浏览器中使用。两者都使用可重用组件，但是用于呈现组件中元素的语法（使用 JSX）是不同的。React JSX 渲染类似于 HTML 的组件，例如 <h1>、<p> 等，而 React Native 则渲染原生应用程序视图组件，例如 <View>、<Text>、<Image>、<ScrollView>，因此除非重新制作/替换所有元素，否则无法直接重用 UI 组件代码。 - Ira Herman
React是一个用于开发Web应用程序前端的JavaScript库。React Native用于移动应用程序。 - subhashis
45个回答
1080

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

React Native 是一个移动框架，利用主机上可用的 JavaScript 引擎，允许您使用 JavaScript 构建不同平台（iOS、Android 和 Windows Mobile）的移动应用程序，使您能够使用 ReactJS 构建可重用组件并与本地组件通信。更多解释

两者都遵循 JSX 语法扩展。在幕后，它们编译为 React.createElement 调用。深入了解 JSX

两者都是由 Facebook 开源的。

91
如果我用React Native构建一个应用程序，其中的任何/全部内容是否可以在ReactJS中重复使用，反之亦然？ - Troy Cosentino
14
海报可能是指在NodeJS上使用ReactJS库，以便创建预构建文件（使用类似Webpack的工具），然后将其作为静态文件提供给客户端。 - Pineda
13
如果我使用React构建WebApp，那么同样的HTML/JS代码能否在使用React Native构建的移动应用程序中使用？ - Ravi Maniyar
24
可以重用业务逻辑，但不能重用 UI 代码。React Native 使用本地 UI 组件，而 React.JS 用于 web，UI 是使用 HTML 组件和 CSS 构建的。 - Chromonav
2
React Native将提供所有必要的工具，让您编写代码时就像使用React一样。React Native为您提供视图而不是Div等。 - David Casanellas
显示剩余6条评论
398

这是 React 项目。

在 Facebook，他们发明了 React 来使用虚拟 DOM 模型，从而使 JavaScript 更快地操作网站 DOM，全面刷新比使用 React 虚拟 DOM 模型 的局部刷新慢。

正如您可能从这个视频中理解的那样，Facebook 并不是因为立即意识到局部刷新比传统刷新更快，才发明了 React。最初，他们需要一种方法来减少 Facebook 应用程序的重新构建时间，幸运的是这带来了局部 DOM 刷新。

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

在使用 React Native 之前，您需要掌握 Java 或 Kotlin（用于 Android），以及 Swift 或 Objective-C（用于 iPhone 和 iPad）才能创建本机应用程序。

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

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

15％的代码是平台特定的。平台特定的 JavaScript 可以给平台带来独特风格（并在体验中产生差异）。

很酷的是，这个平台特定的代码已经编写好了，所以您只需使用它即可。

17
我个人更喜欢这个答案，因为它更详细，并提供了进一步解释的链接。 - Cristi Potlog
10
我也喜欢这个答案。在React Native之前，请不要忘记还有Xamarin。;) - Asp Upload
@AspUpload 或 Flutter - byake
好奇地问一下，React Native还能构建Web应用程序吗？或者它只能用于构建Android和IOS应用程序？我仍然对此感到困惑。 - Robby Hoover
191

React:

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是用于Web应用程序视图的UI库，使用JavaScript和JSX，而React Native是在React之上的额外库，用于创建适用于和Android设备的原生应用程序。

React代码示例：

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://reactjs.org/

了解更多关于React Native的信息，请访问以下React Native官方网站：

https://reactnative.dev/

82
你的代码示例很有用，但是如果能看到同一组件在每个框架中的实现，那就会更好了。 - poshest
12
你的答案应该被接受，我来这里是想了解React和React Native是否具有相同的架构，以及代码看起来是否相同，而不是想了解两个库的定义。 - Gherbi Hicham
2
我想补充的是，如果你选择原生开发，你实际上只需要两行代码，其中一行根据输出自动设置（取决于情况）。是的，你需要一个日期格式化程序，但仍然只需一行代码。当React应用程序比实际本地应用程序多20倍的代码时，我很难相信“这就是为什么React很棒”的说法。尽管如此，我很感激您的回答，并且在Web端对React提供的解决方案感到满意。我只是希望更多的人知道如何在没有它的情况下实现其模式，以便在需要和维护性之间进行比较。 - Stephen J
105

首先，相似之处：React和React Native（RN）都旨在创建灵活的用户界面。这些框架有很多好处，但最基本的是它们是为UI开发而设计的。Facebook在React几年后开发了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，在iOS上是UIView）。

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

75

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中可以使用Objective-C编写的iOS代码和Java编写的Android代码。

注意：React Native作为一个框架，允许以类似于HTML和CSS的语法开发移动应用程序。React Native组件有效地替换了本地开发中的HTML。

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

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

  1. 在React-Native中，您经常使用像<View>，<Text>这样的标签，而React.js使用Web HTML标签，如<div>，<h1>，<h2>，它们只是Web /移动开发字典中的同义词。

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

我希望这是React.js和React-Native之间快速区别/相似性的简单解释。

React.js 的很多部分都被 React Native 所使用。如果说它只是“用于开发 Web 应用程序”，那么它也直接用于 React Native 来构建移动应用程序，这会让人感到困惑。许多 React Native 应用程序，特别是较小的应用程序，可以使用 100% 共享的 JavaScript 代码，而没有任何平台特定的代码。 - ICW
46
我知道已经有很多答案了，但在阅读了所有这些答案之后，我感觉没有人解释这两者的架构差异以及它们如何工作，因此我认为仍有解释的空间。
React
React = Vanilla JS + ES6 + HTML + CSS = JSX = Web Apps(Front end)
所以我们先谈谈 React，因为 React-Native 也是基于 React 的，并且在那里使用了相同的 JS 概念。
React 是一个 JS 库，用于制作美观、灵活、高性能的单页面 Web 应用程序。那么现在你会问什么是单页面 Web 应用程序呢？
单页面应用程序
单页面应用程序是一种在浏览器内运行且不需要在使用过程中重新加载页面的应用程序。你每天都在使用这些类型的应用程序。例如：Gmail、Google 地图、Facebook 或 GitHub。 SPA 的目标是通过尝试模仿浏览器中的“自然”环境来提供出色的用户体验——没有页面重新加载，没有额外的等待时间。它只是一个网页，您访问它后，它将使用 JavaScript 加载所有其他内容——这是它们非常依赖的。 SPA 独立请求标记和数据，并直接在浏览器中呈现页面。我们可以归功于像 AngularJS、Ember.js、Meteor.js、Knockout.js、React.js 和 Vue.js 这样的先进 JavaScript 框架。 单页面网站有助于将用户保留在一个舒适的 Web 空间中，以简单、易用和可操作的方式呈现内容给用户。
它是如何工作的
现在你知道什么是 SPA 了，所以你知道它是一个 Web 应用程序，因此它将使用 HTML 元素运行到浏览器中，并使用 JS 处理与这些元素相关的所有功能。 它使用虚拟 DOM 来渲染组件中的新更改。
React-Native 现在你对 React 有了一点了解，那么让我们谈谈 React-Native。
React-Native = React (Vanilla JS + ES6 + JS 和本地代码之间的桥梁) + Native(iOS、Android) = 移动应用(Android、iOS，也支持 Web 但有一些限制)
React-Native 用于使用 React 制作美观的跨平台移动应用程序（Android、iOS）。
它是如何工作的
在 React-Native 中有两个线程。
1. JS 线程 2. Native 线程
所有 React 代码都在 JS 线程中执行，最终值传递到 Native 线程，后者使用最终值在屏幕上绘制布局。

JS线程执行所有计算并将数据传递给本地线程，如何实现？

React使用异步桥接以JSON格式将数据传递到本地线程，称为React-Native。

注意：新架构不再依赖于桥接，而是使用JSI和fabric在本地和JS代码之间进行同步通信（在下面的部分中解释）。

因此，我们在React Native中使用本地组件制作演示视图，并使用该桥梁在这两个不同的世界之间进行通信。

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

更新： React-Native现在正在经历重新架构阶段，Facebook团队正在尝试删除异步桥梁，以便在JS和本地之间同步通信，这个重新架构的主要部分是JSI（Javascript interface）和fabric。

JSI： JSI消除了Native（Java / ObjC）和Javascript代码之间桥接的需要。它还消除了在两个世界之间进行通信时序列化/反序列化所有信息的要求。JSI通过将JavaScript和本地世界靠近打开了新的可能性。

以下是JSI提供的主要内容。

  1. Javascript接口，允许我们向Javascript运行时注册方法。这些方法可以通过Javascript世界中的全局对象使用。

  2. 这些方法可以完全用C ++编写，也可以是在iOS上与Objective C代码通信的一种方式，以及在Android上与Java代码通信的一种方式。

  3. 任何当前使用传统桥梁在Javascript和本地世界之间进行通信的本地模块都可以通过编写简单的C ++层将其转换为JSI模块。在iOS上编写此层很简单，因为C ++可以直接在Objective C中运行，因此现在可以使用所有iOS框架和代码。

  4. 但是，在Android上，我们必须走额外的路程来通过JNI完成此操作。

  5. 这些方法可以完全同步，这意味着不需要使用async / await。

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

Fabric是React Native的新渲染系统，是传统渲染系统的概念演进。其核心原则是在C ++中统一更多的渲染逻辑，提高与主机平台的互操作性，并为React Native解锁新功能。开发始于2018年，2021年，Facebook应用程序中的React Native由新的渲染器支持。

让我们谈谈这两个框架之间的共同点和差异。

特性 React React-Native
平台 Web Android、IOS、Web
开源 是 是
用户界面 HTML + CSS 本地组件(iOS、Android、Web)
架构 虚拟DOM 虚拟DOM + 桥接层 + 本地实现
动画 CSS动画 本地动画
样式 CSS JS样式表
开发者 Facebook Facebook
这是一个很好的答案 +1 - Soner from The Ottoman Empire
@snr 很高兴知道它对你有帮助。 - Waheed Akhtar
你应该更新你的回答以更好地显示表格。点击此处了解更多信息。 - NearHuscarl
我找不到 Vaila JS -- 这应该是 Vanilla JS 吗？ - iewebguy
是的，你说得对，抱歉拼写错误，现在已经更正了。 - Waheed Akhtar
显示剩余2条评论
44

我们不能完全比较它们，因为使用情况存在差异。

(2018 更新)

ReactJS

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

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

React Native

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

    • 它的主要关注点是移动用户界面。
    • 涵盖了iOS 和 Android。
    • 可重用的 React Native UI 组件和模块，允许混合应用程序以原生方式呈现。
    • 你无需重构旧的应用程序。你只需要将React Native UI组件添加到现有应用程序的代码中，而不需要重写。
    • 不使用HTML来渲染应用程序。提供类似的替代组件，因此很容易理解它们。
    • 由于你的代码不会在HTML页面中呈现，这也意味着你 不能重复使用之前与React一起使用的任何呈现任何类型的HTML、SVG或Canvas的库。
    • React Native不是由Web元素制成的，无法以同样的方式进行样式化。再见CSS动画！

    • 希望我对你有所帮助 :)

    26

    简单来说，React和React Native在设计原则上基本相同，不同之处在于设计用户界面的情况。

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

    总之，这是一个构建移动端和Web用户界面的绝佳库。

    22

    React是一个声明式、高效和灵活的JavaScript库，用于构建用户界面。你的组件告诉React你想要渲染什么-然后当你的数据改变时，React会高效地更新和渲染恰当的组件。这里，ShoppingList是一个React组件类或React组件类型。

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

    更多信息

    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接