协慌网

登录 贡献 社区

React Native 和 React 之间有什么区别?

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

答案

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

React Native是一个移动框架,它利用主机上可用的 JavaScript 引擎,使您可以使用 JavaScript 构建适用于不同平台(iOS,Android 和 Windows Mobile)的移动应用程序,从而允许您使用 ReactJS 来构建可重用的组件并进行通信带有本机组件的进一步说明

两者都遵循 JavaScript 的 JSX 语法扩展。可以在React.createElement编译为 React.createElement 调用。 JSX 深入

两者均由 Facebook 开源。

反应:

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是使用 javascriptJSX来提供 Web 应用程序视图的 UI 库, React native是 React 之上的一个额外的库,用于为iOSAndroid设备创建本机应用程序。

反应代码示例:

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://facebook.github.io/react

有关 React Native 的更多信息,请访问下面的 React native 网站:

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

首先,相似之处: React 和 React Native(RN)均旨在创建灵活的用户界面。这些框架有很多好处,但是最根本的收获是它们是为 UI 开发而设计的。在 React 之后的几年,Facebook 开发了 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 UIView

简而言之:它们非常相似(用于 UI 开发),但是用于不同的介质。