React Native 和 React 有什么区别？

React Native 和 React 在很多方面是相似的，因为 React Native 是基于 React 的，但是它们也有一些关键的区别，主要体现在它们的使用平台和渲染机制上。

React

React 是一个用于构建用户界面的JavaScript库，它专注于构建Web应用程序的前端。React 使用了一种名为JSX的语法，它允许开发者在JavaScript代码中编写类似HTML的结构。

特点：

• Virtual DOM：React 通过使用虚拟DOM来优化DOM操作，提高渲染性能。
• 组件化：React 强调构建可重用的组件，这有助于代码的维护和管理。
• 单向数据流：React 通常与如Redux这样的状态管理库一起使用，以提供一个可预测的单向数据流环境。

React Native

React Native 是一个用于构建原生移动应用的框架，它允许开发者使用JavaScript和React来构建iOS和Android应用程序。

特点：

• 跨平台：使用React Native，开发者可以用相同的代码库创建在iOS和Android上运行的应用程序。
• 原生组件：React Native将React的组件转换成对应平台的原生组件，这样可以保证用户获得接近原生应用的体验。
• 动态更新：React Native支持热更新，允许开发者直接推送更新到用户的设备上，而无需经过应用商店的审核。

主要区别

• 平台：React 通常用于构建Web应用程序，而 React Native 则用于构建移动应用程序。
• 渲染机制：React 在浏览器中使用虚拟DOM来渲染Web界面，而React Native 使用的是桥接技术（Bridge）来调用原生模块，这样可以使得应用在不同的设备上拥有原生的性能和外观。
• 样式：React 使用CSS来定义样式，而React Native 则使用JavaScript对象来定义样式，这些样式对象最后会被转换成对应平台的样式规则。
• 导航：Web应用的导航是建立在URL和浏览器历史上的，而移动应用则通常使用屏幕之间的导航堆栈。

示例：

在React中，你可能会这样创建一个按钮组件：

jsx
function MyButton() {
  return <button className="my-button">Click me</button>;
}

在React Native中，相同的按钮组件会是这样：

jsx
import { Button } from 'react-native';

function MyButton() {
  return <Button title="Click me" />;
}

总结来说，虽然React和React Native在设计理念和开发模式上有着很多共通之处，但它们是为不同平台和不同类型的应用程序设计的。React 更适合Web应用程序的开发，而React Native 则是为了解决移动应用开发中的跨平台问题。

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

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

两者都遵循 JavaScript 的 JSX 语法扩展。它编译为React.createElement底层调用。JSX 深入

两者都是 Facebook 开源的。

这是React项目。

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

与React virtual-dom 模型相比，DOM 完全刷新速度较慢，React virtual-dom 模型仅刷新页面的部分内容（读作：部分刷新）。

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

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

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

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

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

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

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

反应：

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

反应本机：

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 之上的一个额外库，用于为iOS和Android设备制作本机应用程序。

反应代码示例：

shell
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代码示例：

shell
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/

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

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

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

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

注意：React Native 作为一个框架，允许使用与 HTML 和 CSS 类似的语法来开发移动应用程序。React Native 组件有效地取代了原生开发中的 HTML。