React 与 React Native 的主要区别、特点、优势

React 还是 React Native？哪一个更好、更受欢迎？让我们在这篇详细的博客中为您提供所有答案——React 和 React Native 之间的区别以及独特的优势和局限性。这将帮助您决定 React 是否适合您或 React Native 是否适合您的项目。

在技术世界中，我们往往会混淆这两个特定的术语 - React 和 React Native。在许多情况下，如果一个没有编码知识的人听到 React 和 React Native，他们会认为 React Native 是 React 技术的扩展。即使是开发人员，如果他们是开发行业的新手，也可能会考虑同样的事情。

那么，这些到底是什么？为什么我们经常会感到困惑？让我们在本文中一探究竟。

React 和 React Native 是应用开发行业中两种流行的技术。它们的名称看起来很相似，只是多了一个单词。因此，乍一看很容易被骗。如果您仍然感到困惑，不确定 React 和 React Native 之间的区别，那么您已经来到了揭开它们背后秘密的正确页面。

1. 介绍：React 与 React Native
2. 什么是 React？
3. 什么是 React Native？
4. React Native 与 ReactJS：它们如何工作？
5. React 和 React Native 之间的区别
6. 优势：React 与 React Native
7. 缺点：React Js 与 React Native
8. 我应该学习 React 还是 React Native？

简介：React 与 React Native？

React 和 React Native 是由 Facebook 开发的，并在短时间内获得了大量粉丝。React 被称为ReactJs，它是一个用于构建单页 Web 应用程序的 JavaScript 库。

此外，React Native 是一个基于 React JS 的移动应用设计框架。此外，借助可重用的组件，您可以开发原生移动应用程序。

• React是一个可重用组件的 JavaScript 库，旨在创建应用程序的骨架，而React Native 则旨在使用可重用组件构建原生移动应用程序。
• React用于构建Web 应用程序的用户界面，而React Native用于开发 Android、iOS 和 Windows 的移动应用程序。
• React利用 HTML、CSS 和 JavaScript 来创建交互式用户界面，而React Native利用 API 和原生 UI 组件来构建移动应用程序。
• React.js使用虚拟 DOM 在 React 中呈现浏览器代码，而React Native使用 Native API 为移动应用程序呈现组件。
• React 的学习曲线很陡峭，因为它需要了解一些库，而React Native只要具备 React 和 JavaScript 的基本知识就更容易理解。
• React是一个用于构建 Web 应用程序 UI 的开源 JS 库；此外，React Native还可用于仅使用 JavaScript 从声明性组件构建丰富的移动 UI。
• React 和 React Native都统治着行业，并被广泛用于移动和 Web 应用程序。但是， Web 应用程序与网站之间的差异 不会影响您的用户。

现在，让我们从鸟瞰的角度了解 React 和 React Native 在您的项目中的实际用途、主要优点、缺点和差异。

什么是 React？

GitHub：177k 个 Star 和 35.7k 个 Fork

React： 一个前端开发库

React 或 ReactJs 是一个开源 JavaScript 库，广泛用于单页应用程序开发服务。它是用于构建 Web 和移动应用程序 UI（前端）的流行库之一。它由 Facebook 于 2011 年开发和支持，自那时起就广受欢迎。

React 允许开发人员开发快速、自适应且直观的移动和 Web 应用程序。此外，它还使他们能够自动化设计过程。通过利用其功能，ReactJs 开发人员可以构建他们想要的任何东西，而无需遵守严格的规则。

ReactJs 开发人员可以轻松地将插件或库与现有代码集成。它还使他们能够开发快速、可扩展且简单的 Web 应用程序。随着React 在前端开发中的出现，它带回了急需的服务器端逻辑。

通过利用 React JS 开发服务，您将能够为客户提供渐进式 Web 应用程序开发、单页应用程序和静态网站来满足他们的需求。

什么是 React Native？

GitHub：98.9k 个 Star 和 21.4k 个 Fork

React Native： 原生移动开发库

当我们谈论 React Native 时，它​​是由 Facebook 开发的一个基于 JavaScript 的开源框架，旨在满足其日益增长的移动需求。React Native 是一个混合移动应用框架，允许您使用单一代码库开发移动应用程序。这个 JavaScript 框架允许您构建可在 iOS 和 Android 等不同平台上本地呈现的移动应用程序。

现在，你们中的许多人都会对上面这句话感到惊讶。对吗？

那么，现在我们可以使用单一框架为 iOS 和 Android 操作系统构建移动应用程序吗？

好吧，如果你没有及时关注我们的文章，那么你就不可能知道这一点。所以，回到你的问题，答案是肯定的！

React Native 允许您为每个平台（Windows、Android 和 iOS）开发跨平台应用程序。因此，这里又出现了另一个用于跨平台应用程序开发的框架。

实际上，React Native 使用了 React.Js 的基本抽象。但只有库组件是不同的。尽管核心性质相似，就像兄弟姐妹一样，但 React JS 和 React Native 之间的区别是巨大的。我们将在本文后面讨论它。然而，这两种技术都是各自用途的大师。此外，React Native 的开发成本因应用程序要求的功能而异。

那么，现在问题又来了， **React Native** 中的 **Native**到底是怎么回事？

说到这里，React Native 开发允许您开发在 iOS 和 Android 平台上无缝运行的本机应用程序。

似乎创建者只是因为这种方法才将其命名为 React Native。这是我的猜测，不确定！

React Native 与 ReactJS：它们如何工作？

你一定想知道，React 和 React Native 背后究竟做了什么？

React 使用虚拟 DOM 来创建令人惊叹的 UX，而 React Native 利用 API 来渲染可在 Android 和 iOS 平台上再次使用的 UI 组件。

ReactJs 的虚拟 DOM

文档对象模型 (DOM) 是一个重要的编程接口，它代表了 Web 文档及其内容。库和框架管理 DOM 的能力对它们的最终使用和显示方式有着重大影响。

虚拟 DOM 改变了 React 的游戏规则。它是真实 DOM 的虚拟表示。这意味着虚拟 DOM 在创建动态 UI 时管理快速更新。主要区别在于，虚拟 DOM 速度快、性能增强、用户体验比真实 DOM 更新更好。

React Native 的原生 API

此外，React Native 在渲染 UI 组件时，使用 Java API 来渲染 Android 组件，使用原生应用程序接口 (API)，并使用 Objective-C 来编写 iOS 组件。

随后，使用 JavaScript 构建剩余代码并针对每个平台个性化应用程序，实现最大程度的组件可重用性和代码可共享性。

React Native 不使用 CSS 和 HTML，而 ReactJs 则使用。因此，您必须使用 JavaScript 创建样式表来设置 React Native 组件的样式。虽然它看起来可能与 CSS 相似，但实际上并不相同。

类似地，在 React Native 中，ReactJS 使用<p>against <text>，而<div>在 React 中使用 而不是<view>for React Native 。

我们来举一个实时的例子：

对于 ReactJs：

`function tick()
{
const element = (

ReactDom.render(element, document.getElementById(‘root’)); } setInterval (tick,1000); `

对于 React Native：

import React, { component } from ‘react’;

import {text, view} from “react-native”;

export default class HelloWorldApp extends component { render() { return { <view> <text> Hello World </text> </view> } } }

实用提示： 要运行 React Native 应用，您的系统中必须有 Android Studio（适用于 Android）或 Xcode（适用于 iOS）。之后，您可以决定是在模拟器上运行应用程序还是直接在设备上运行应用程序。

React 和 React Native 之间的区别

“我们公司犯下的最大错误就是在 HTML 上投入了太多，而忽略了原生应用。”——马克·扎克伯格

我们知道，大多数兄弟姐妹都有共同的功能和特征。尽管他们也同意他们之间的差异和相似之处一样多。

同样的理论也适用于这些同义技术 - React 和 React Native。那么，让我们了解一下 React 和 React Native 之间的区别。

1）安装过程

React：

正如我们在本博客前面所读到的，React 是一个 JavaScript 库。您所要做的就是在 HTML 页面的标签中集成 React 库<script>。

<scriptsrc="unpkg.com/react-dom@1…"

完毕！

https://reactjs.org/docs/add-react-to-a-website.html

现在您可以创建您的第一个 React 组件并集成到您的 HTML 网站中。

您可以使用 bundler 来处理大型项目。如果您使用 Next.Js、create-react-app 命令或 Gatsby 框架等工具来处理新项目，Webpack 可能已配置为捆绑到您的应用程序。否则，您必须确保已配置 Webpack。

捆绑器将所有启用代码的文件合并为一个大文件。您还可以找到其他捆绑器，例如 Rollup 或 Browserify。

React Native：

要使用 React Native 开发应用程序，您必须拥有一个开发环境，例如 Android 的 Android Studio 或 iOS 的 Xcode。

但是，您需要安装其他工具，如 Node、React Native CLI、JSDK Watchman 等。安装后，您可以在 React Native 命令行界面中创建一个新项目，并在移动模拟器或您自己的设备上执行它。

从 React JS 迁移到 React Native 是一种非常简单的方法。事实上，如果你熟悉 React 和 JavaScript 库，那么几个月后你就能对 React Native 框架有正确的理解。这样，你就可以开发你的第一个原生应用程序了。

2）效率

React：

如果您计划为项目开发出色的用户界面，那么 ReactJs 就是您的不二之选。ReactJs 提供的出色功能之一是它可以在客户端执行，同时在服务器端呈现。

ReactJS 不仅提高了开发人员的效率，还为他们在创建基本抽象时提供了更多选择。简而言之，它既适用于可点击按钮等低级元素，也适用于下拉菜单等高级元素。

React Native：

React Native 实现了不同的方法来最大限度地提高开发人员的效率。您可能在 iOS 和 Android 中使用的组件在 React JS 中具有类似的外观和感觉。可重用的本机组件是 React Native 的基本块。这些组件直接编译为本机代码。因此，该应用程序将具有本机应用程序的惊人外观、感觉、功能和速度，将 React Native 与其他移动应用程序开发框架区分开来。

此外，React Native 开发人员可以轻松地将 Java、Swift、Objective-C 等本机代码集成到框架中以获得定制的外观。

3）技术基础

React：

React 只是一个 JavaScript 库。因此，要成为 ReactJs 大师，你只需学习和理解 JavaScript。如果你对技术文档有适当的了解，你很快就能成为一名 React 开发人员。

React 专注于使用 JavaScript 为 Web 开发直观的 UI。

React Native：

React Native 是一个使用 React.Js 创建移动用户界面的框架。由于它继承了 ReactJs 的所有功能，因此它还具有许多优势并使用了像 React 这样的声明式组​​件。

确切地说，React Native 不是一个纯 JavaScript 框架。它结合了 Java、Objective-C、Objective-C++ 和 C++ 代码。因此，学习并熟练掌握所用的语言对于构建 React Native 应用程序至关重要。

4）可行性

React：

React，通常称为 React JS，融合了 HTML 和 JavaScript 技术。据确定，这样做主要是为了集成 CSS，从而消除与 CSS 开发相关的各种挑战，例如全局命名空间和变量/作用域隔离。

React Native：

您是否想在不更改整个代码的情况下向现有应用添加更多组件和功能？那么，React Native 可以帮助您。

React Native 允许您将各种原生组件添加到现有应用代码中。如果您的混合应用是使用 Ionic 和 Cordova 开发的，那么您只需一个插件集成即可有效地重用基于 Ionic 的代码。

5）兼容性

React：

React JS 在创建时考虑了搜索引擎优化（SEO）因素，它使用 Node 在用户的服务器上呈现。

React Native：

此外，React Native 专为开发移动 UI 而设计。这意味着，除了完全由 UI 驱动之外，React Native 的工作方式更像是一个 JavaScript 库，而不是一个框架。因此，UI 响应速度极快，让应用程序感觉更流畅，加载时间更快。

6）语法

React：

<p>使用 React，您可以用 JavaScript 编写代码。之后，React.Js 使用、<div>、等标签呈现类似 Html 的组件<h1>。您可以使用 JSX - 一种特殊的 JavaScript 语法扩展。

JSX 是一种类似于模板语言的语法，不区分标记和逻辑。这意味着你用 JavaScript 编写标记，乍一看可能不太合适，但 React 声称它并不像看起来那么糟糕。

编译后，将不会有 JSX 代码。只会有常规的 JavaScript 函数和对象。

React Native：

如果你想使用 React Native，你必须了解它的特定语法。在这里，React Native 使用<view>、<text>、<images>等渲染原生组件，而不是渲染类似 HTML 的组件。

我们在上面的章节中看到了显示“Hello World”的代码逻辑上的差异。

因此，我们可以说，React Native 不使用 HTML，因此它不适合用于Web 开发解决方案<view>。因此，您可以开发移动应用程序（Android、iOS）、智能手表、电视、AR 以及更多应用程序，因为 React Native 中的标签<text>会编译成本机语言。

这意味着您不能使用任何类型的 HTML、SVG 或 Canvas 的库。

7）组件

React：

React 是一个基于组件的库。组件是一个 JavaScript 类或方法，它传递一个 React 元素并定义某个用户界面部分的外观。ReactJs 有两种不同的组件：函数组件和类组件。

如果你在 JavaScript 中使用函数组件：

function Welcome(props) { return <h1> Hello, {props.name} </h1>; }

此外，你也可以使用 ES6 类定义相同的组件：

class Welcome extends React.Component { render() { return <h1> Hello, {this.props.name} </h1>; } }

事实上，使用这两种类型的组件，你都可以创建一个功能类似的应用程序。与函数组件相比，类组件提供了更多功能。然而，使用函数组件时，代码的可读性吸引了所有人的眼球。它允许开发人员编写更少的代码。因此，你可以看到出色的应用程序性能。

使用 ReactJS 构建高性能且经济高效的移动应用程序

聘请移动应用程序开发人员

React Native：

我们前面说过，React Native 有 Native 组件和 Native 模块，可以让开发者开发应用程序。

原生 UI 组件是方便使用的现成小部件。它们作为平台的一部分或第三方库提供。如果您需要特定组件，可以在 UI Explorer 中找到。它还允许您创建自定义组件，然后在整个应用程序中重复使用它。

Native 模块是一组 JavaScript 函数，当 React Native 不支持您要求的必需功能/模块时，它们会支持平台 API。使用 GitHub 上的一些工具，您可以构建自己的模块。

• 使用单个命令创建本机视图组件。
• CLI为 Android 和 iOS 平台设置简单的示例模块。

8）导航

React

如果您使用 React.Js 开发应用程序，则必须了解提供点击事件导航的_react-router 库_。在 React Router v5 发布后，useHistory 钩子成为框架中访问历史记录实例的有用功能。

React Native：

嗯，React Native 不允许您使用 react-router。因此，React Native 提供了一个独特的库 Navigator 来管理不同显示之间的过渡。此外，您还会发现另一个名为React Native Navigation的库。该库在 Android 和 iOS 平台上提供准确的原生平台导航。

9）存储

React：

React 使用本地存储来存储和管理数据。本地存储中的存储没有有效期。因此，即使浏览器窗口关闭，它也将被保留。

React Native：

React Native 默认使用 AsyncStorage。此外，它还有一些允许在本地存储数据的库。

如果我们考虑 iOS 平台，AsynStorage 由本机代码支持，它以特定格式存储小值，并将较大的值存储在单个文件中。

而Android平台上的AsyncStorage则根据可用性使用RocksDB或SQLite。

在开发 React Native 应用时，拥有 AyncStorage 基本上就足够了。但是，在某些情况下，您需要有多个选项来存储数据，如下所示：

• 在使用Redux时，您可以使用 redux-persist。
• 使用库将数据存储在设备或Realm或SQLite上。

10）搜索引擎友好

React：

在开发 React.Js 应用程序时，您必须牢记 SEO 因素。然而，React JS 技术的主要目标是提供一个直观的用户界面，该界面会根据用户交互不断变化。

但事实上，Google 机器人不是人类。因此，我们需要正确地索引我们的网页，以便让 Google 机器人注意到我们的应用。

React JS 有各种工具和库可以从 SEO 角度优化你的应用程序。

React Native：

当我们考虑 React Native 时，它​​与 SEO 无关。它取决于我们（开发人员）如何构建原生 UI。

优势：React Native 与 React

React：

1）学习曲线简单

如果您打算学习 ReactJs，您会在互联网上找到许多教程、指南、文章和文档。这将帮助您在很短的时间内学习并很好地理解 React JS。此外，对 JavaScript 有基本了解的开发人员可以非常轻松地学习 React JS。

2）可重用组件

ReactJs 开发人员可以在应用程序开发过程中重用各种组件。每个组件都提供自己的逻辑和渲染。并且可以在需要时重用此逻辑。此功能可以加快应用程序开发速度。

3）虚拟 DOM

虚拟 DOM 是另一个令人惊叹的功能，可提供更高的性能。它确保真实 DOM 的轻量级副本得到更新。这有助于提高效率和可用性。

React Native：

1）易于学习和实施

React Native 使用 JavaScript（如 React.Js）作为基础语言。这提供了相同的应用程序开发感觉，但具有许多迭代和灵活性。它还提高了开发人员开发 React Native 应用程序的技能和能力。

2）可重用代码

使用 React Native 的主要好处是它允许开发人员构建跨平台应用程序。通过代码可重用性，您可以使用一个代码库在 Android 和 iOS 平台上部署。

3）错误更少

在各个平台上部署 React Native 应用时，需要的调试和优化较少。React Native 分布在各个平台上，因此需要的测试和增强较少。

缺点：React Js 与 React Native

ReactJS：

1）JSX

React 使用 JSX（JavaScript XML）。JSX 是一个扩展或插件，允许开发人员在 React 中编写 HTML 代码。因此，许多开发人员不喜欢或不喜欢 JSX 文档，并觉得初学者很难学习。

2）持续更新库

每个开发人员最担心的是由于 React 库频繁更改导致应用程序开发速度严重受阻。然而，React 的改进现在主要保留在库和其他更新上，这使得代码或多或少具有健壮性。

3）第三方集成

尽管 React 提供了多个第三方模块和插件，但它也有一些原生模块。通过使用第三方集成，开发人员可以将 HTML 和 CSS 代码组合成 JSX，并降低其复杂性。

React Native：

1）定制模块短缺

如果应用程序加载了太多功能，由于缺少原生模块和依赖第三方库，开发速度会降低。此外，创建自定义模块将创建三个单独的代码库（RN、iOS、Android），而不仅仅是一个。

2）频繁更新

开发人员不断致力于改进 React Native。它总是推出新的移植原生组件、增强的性能和改进的自定义组件。

不过，更新并不是这里的减分项。但与高度发展的跨平台应用开发框架相比，开发人员必须考虑这一因素。

3）加载时间

应用程序加载时间是每个 React Native 开发人员面临的关键问题。由于 JavaScript 线程的存在，部署需要花费大量时间。

我应该学习 React 还是 React Native？

所以，现在你可能已经对这些兄弟——React 和 React Native 有了清晰的认识。

我们知道，它们的最终产品平台有所不同，但它们遵循类似的开发原则或方法。

实际上，如果你能学习 React 或 React Native 框架，那么学习另一个框架也会变得更容易。但是，要开发 React Native 应用程序，你应该了解 React。但这还不够！我们需要了解并深入了解更多原生应用程序，因为 React Native 对它的支持有限。

因此，如果您计划开发 Web 或移动应用程序，那么您可以聘请 React 或 React Native 开发人员。他们将在未来为您未来的开发带来一定的优势。但这不是强制性的！如果您了解 JavaScript，那么学习 React 将是小菜一碟。