了解 React 与 React Native

人们常常会把许多事物搞混淆，这种混淆往往源于事物之间某些相似的特征。其中，最常见的一种混淆，就是源于它们名称上的相似性。

通常情况下，人们会先接触到某个新事物的名称，无论是人、动物、产品还是软件等等。他们会通过搜索这个名称来了解它的各种特性、应用场景、发展历史等等。

那么，为什么会出现这种情况呢？

的确，很多人经常会对 “React” 和 “React Native” 这两个术语（名称）感到困惑。对于非技术人员来说，看到这两个名称，很可能会认为 React Native 是 React 的一个扩展。即使是具备一定技术背景的人，如果对这两个领域了解不多，也可能会产生类似的误解。

那么，它们究竟是什么？为什么人们经常对它们感到混淆，而不是其他事物呢？

React 和 React Native 实际上是两个不同的框架。它们的名字看起来很相似，仅仅是多了一个单词而已。因此，人们常常会因为第一眼的印象而混淆它们。如果您也有同样的疑惑，那么这篇文章将为您揭开它们背后的真相。

让我们一起深入了解一下。

React

React 是一个用于构建单页 Web 应用程序的 JavaScript 库。它是在 Web 前端领域构建用户界面的最流行的库之一，甚至可以说是目前最受欢迎的库。React 由 Facebook 创建并维护，也被称为 ReactJS。

根据我使用 React 的经验，我可以肯定地说它既强大又易于学习和构建。作为一个库，我们可以利用它提供的各种功能来构建任何我们想要的东西。使用 React 开发应用程序时没有严格的规则，这给了我们很大的自由。

React 拥有许多令人兴奋的特性，让我们来一一了解一下。

#1. 组件

在 React 中，一切皆为组件。组件就像是 Web 应用程序的构建模块。我们可以通过组合小的组件来创建更大的组件。每个组件都有自己的状态和控制逻辑，负责控制用户界面并根据其状态决定向用户展示什么内容。

组件是 React 的核心概念，并且是可复用的。一旦编写完成，就可以在任何地方使用。

在编写组件时，我们需要格外小心。随着应用程序的不断增长，合理的组件设计可以使维护变得更加容易。如果我们在单个组件中编写大量的代码，它最终会成为我们维护的负担。React 组件应该保持小而精，它们可以使开发者的工作变得轻松，但也可能带来挑战。

#2. 虚拟 DOM

您可能已经在按钮中看到过类似加载器的动画，或者在社交媒体平台上，点赞数会随着您的点击而增加。在早期的网络中，我们必须重新加载整个页面才能获取新的信息。但是现在，只需要更新需要修改的部分即可，而无需触及其他内容。这是怎么实现的呢？

正如我们之前看到的，React 中的一切都是组件。浏览器维护着 Web 应用程序元素的 DOM 结构。当 Web 应用程序的某个部分需要更新时，我们必须使用 DOM 操作来更新它。而 React 可以高效地完成这项工作。

React 为所有组件创建一个虚拟 DOM (DOM 的一个副本)。为了更新 Web 应用程序中的某些内容，React 会将真实的 DOM 与虚拟 DOM 进行比较。如果发现任何差异，React 将会触发更新组件的操作。

#3. 单向数据流

如果没有数据流，我们无法将大型的组件集合分解为更小的组件。组件之间的数据流动必须遵循某种规则。

React 允许我们将数据从一个组件单向传递到另一个组件。数据从父组件流向子组件，而子组件无法直接修改这些数据。由于数据流是单向的，因此无法将数据发送回父组件。

您可能一开始会认为单向数据流不如双向数据流方便。但是，单向数据流可以帮助我们更好地控制整个应用程序的数据流动。

概述

React 还有许多其他的特性，如 JSX、条件渲染等等。它们虽然也很重要，但相比上述几个核心特性来说，略显次要。我们已经了解了 React 库的主要特性。至于 React 的应用，我们几乎可以用它构建任何类型的 Web 应用程序。React 的社区非常庞大，您可以找到很多与 React 一起使用的软件包。

React Native

React Native 是一个用于开发跨平台移动应用程序的 JavaScript 框架。它也由 Facebook 创建和维护。

很多人可能会对上面的说法感到惊讶。

我们真的可以使用单一框架为 Android 和 iOS 创建移动应用程序吗？

如果您没有密切关注科技行业的最新动态，您可能对此并不了解。是的，我们可以使用 React Native 创建跨平台 (Android 和 iOS) 应用程序。并且，还有其他一些用于跨平台应用程序开发的框架。

React Native 是同类框架中最受欢迎的一个。虽然由于 JavaScript 在原生应用程序中的限制，它并非是最理想的选择，但它在自己的发展领域取得了显著的成就。甚至 Facebook、Instagram 和 Flipkart 等大型公司也在使用它。这并不是说您也必须使用它，而是说明我们可以使用 React Native 构建跨平台的生产级应用程序。

我在上面的段落中使用了一个名为“原生应用程序”的词组。这些是什么意思呢？它不是指某种新型的应用程序。原生应用程序是专门为特定平台创建的，比如适用于 Android 手机的 Android 应用程序、适用于 iPhone 手机的 iOS 应用程序以及适用于 Windows 的 Windows 应用程序等等。

React Native 中的 “Native” 指的是什么呢？它指的是，React Native 可以按照我们的意愿创建一个同时适用于 Android 和 iOS 的原生应用程序。 使用 React Native 开发的应用程序，在 Android 平台上表现得像用 Android Studio 开发的一样原生，在 iOS 平台上也是如此。

或许，这就是开发者将其命名为 React Native 的原因。但这并非事实。

说到 React Native 的特性，它也有一大堆值得我们去了解。让我们来看看其中的一些主要特性。

#1. 跨平台

我们可以使用一份代码库，同时为 Android 和 iOS 创建移动应用程序。这为公司节省了大量的时间和金钱。

#2. 热重载或实时重载

如果您有 React 或 React Native 应用程序的开发经验，您可能已经了解这个特性。当我们更改代码时，这个功能会用最新的更新重新加载整个应用程序。我们不必每次修改代码都点击重新加载按钮。只需要更新代码，然后查看更改即可。除非出现错误，否则我们无需等待任何事情。

对于您来说，这似乎是一个次要的功能。但是，如果您是从没有任何框架的 Android 开发过来的，您就会理解 React Native 中这个特性的价值。

#3. UI 库和社区

React Native 中有很多内置的原生组件。我们可以直接使用它们，而无需任何额外的设置或安装。这些原生组件在各自的平台中看起来就是原生的。React Native 应用程序的 UI 与 iOS 原生 UI 以及 Android 原生 UI 相匹配。React Native 拥有类似于 React 的组件概念。

说到社区，它非常庞大，并且还在不断增长。当您遇到问题时，您可以毫不费力地从社区获得帮助。

概述

您可以在互联网上找到 React Native 的许多其他特性。如果您要进行移动应用程序开发，也可以去探索它们。前端开发人员还可以使用 React Native 开发原生应用程序。它使跨平台移动应用程序的开发变得更加容易。

React vs. React Native

React 和 React Native 之间有一些相同点和不同点。让我们来看看它们。

谈到 React 和 React Native 的应用场景，它们是完全不同的。但是，从设计原则来看，它们却非常相似。React 和 React Native 都有组件的概念，并且在各自的开发中遵循着相同的原则。

两者都使用 JavaScript 语言进行开发。让我们分别来看一下两者中一个简单的 “Hello, World” 应用程序。

React:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="container">
        <h1>Hello, World!</h1>
      </div>
    );
  }
}

export default App;

React Native:

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

const App = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      }}>
      <Text>Hello, world!</Text>
    </View>
  )
}
export default App;

可以看出，它们都使用了 React 包。这两个应用程序的语法看起来很相似，因为它们都使用了称为 JSX 的特殊标记。但是，当涉及到渲染部分时，它们使用了不同的机制。React 使用虚拟 DOM，而 React Native 则使用原生 API 进行 UI 渲染。

有一些外部包，如 Redux 和 MobX 等，用于 React 应用程序的状态管理。这些包也可以在 React Native 应用程序中使用。

React 和 React Native 都使用 JavaScript。因此，我们几乎可以将每个 JavaScript 包与它们一起使用。这使得它们的包库非常丰富。

React 和 React Native 是相互关联的。但是，它们用于不同的目的。

结论

React 和 React Native 在最终的产品和应用平台方面是不同的。但是，它们在各自应用程序的开发中遵循相似的原则。如果您可以学习 React 或 React Native 中的一个框架，您将可以更快地学习另一个框架。但是，React Native 应用程序的开发需要一定的 React 知识。此外，还需要更多地了解原生应用程序的开发，因为 React Native 的支持仍然有限。

让我们希望它最终能在未来得到全面支持。

如果您希望开始 Web 或移动应用程序开发，那么选择 React 或 React Native 肯定会在未来对您有所帮助。但这并非强制性的。

如果您学习 React 的概念相对容易，那么掌握 JavaScript 也是必不可少的。官方文档将是您开始使用 React 或 React Native 的重要资源。

祝您学习愉快！🙂