React Native 和 React 有什么区别?

IT技术 javascript reactjs react-native javascript-framework
2021-01-26 04:12:03

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

6个回答

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

React Native是一个移动框架,它利用宿主机上可用的 JavaScript 引擎,允许你用 JavaScript 构建不同平台(iOS、Android 和 Windows Mobile)的移动应用程序,允许你使用 ReactJS 构建可重用的组件和通信带有原生组件的进一步说明

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

两者都是由 Facebook 开源的。

@MelAdane 海报可能指的是在 NodeJS 上使用 ReactJS 库来创建预构建文件(使用 Webpack 之类的东西),然后可以将这些文件作为静态文件提供给客户端。
2021-03-24 04:12:03
那么,如果我在 React Native 中构建一个应用程序,是否可以在 reactJS 中重用其中的任何/所有应用程序,反之亦然?
2021-03-31 04:12:03
如果我使用 react 构建一个 web 应用程序,是否可以在使用 react native 的移动应用程序中使用相同的 HTML/JS 代码?
2021-04-04 04:12:03
@RaviManiyar 不,您可以重用您的业务逻辑,但不能重用您的 ui 代码。React Native 使用原生的 ui 组件,而 React.JS 使用的是 web,ui 是使用 html 组件和 css 构建的
2021-04-08 04:12:03
React Native 将提供所有必需的工具来进行编码,就像您使用 React 一样。React Native 为您提供视图而不是 Div 等。
2021-04-10 04:12:03

这是React项目

在 Facebook,他们发明了React,因此 JavaScript 可以使用虚拟 DOM 模型更快地操作网站 DOM。

React virtual-dom 模型相比,DOM 完全刷新更慢,后者只刷新页面的一部分(阅读:部分刷新)。

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

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

在使用React Native之前,您需要了解适用于 Android 的 Java 或适用于 iPhone 和 iPad 的 Objective-C 才能创建本机应用程序。

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

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

15% 的代码是特定于平台的。特定于平台的 JavaScript 赋予平台风味(并使体验有所不同)。

很酷的是这个特定于平台的代码 - 已经编写好了,所以你只需要使用它。

我个人更喜欢这个答案,因为它更详细,并提供了进一步解释的链接。
2021-04-02 04:12:03
@AspUpload 或颤动
2021-04-07 04:12:03
我也喜欢这个答案。“在 React Native 之前......”不要忘记还有 Xamarin。;)
2021-04-12 04:12:03

react:

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

react-native:

React Native 允许您仅使用 JavaScript 构建移动应用程序。它使用与 React 相同的设计,让您可以从声明性组件组成丰富的移动 UI。
使用 React Native,您无需构建“移动网络应用程序”、“HTML5 应用程序”或“混合应用程序”。您构建了一个真正的移动应用程序,它与使用 Objective-C 或 Java 构建的应用程序没有区别。React Native 使用与常规 iOS 和 Android 应用程序相同的基本 UI 构建块。您只需使用 JavaScript 和 React 将这些构建块放在一起。
React Native 可让您更快地构建应用程序。您可以立即重新加载您的应用程序,而不是重新编译。通过热重载,您甚至可以在保持应用程序状态的同时运行新代码。尝试一下 - 这是一次神奇的体验。
React Native 与用 Objective-C、Java 或 Swift 编写的组件顺利结合。如果您需要优化应用程序的某些方面,可以轻松下拉到本机代码。在 React Native 中构建应用程序的一部分以及直接使用本机代码构建应用程序的一部分也很容易 - 这就是 Facebook 应用程序的工作方式。

所以基本上阵营是一种网络应用程序的角度来看,使用的UI库的JavaScriptJSX阵营本土上发生react顶部的额外库,使本机应用程序用于iOSAndroid设备。

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本机代码示例:

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 是否具有相同的架构,以及代码看起来是否相同,而不是两个库的定义。
2021-03-24 04:12:03
您的代码示例很有用,但看到每个框架中实现的相同组件会更好
2021-04-03 04:12:03
我想补充一点,如果您使用原始原生代码,您实际上只有两行代码,其中一行是为sockets自动设置的(视情况而定)。是的,您需要一个日期格式化程序,但仍然只有一行。我很难阅读“这就是为什么 react 很棒”,因为它的代码行数是实际本机应用程序的 20 倍。也就是说,我非常感谢您的回答,甚至喜欢 React on web,因为它在其擅长的领域中提供了解决方案。我只是希望更多的人知道如何在没有它的情况下实现它的模式,以比较它何时有用与维护噩梦
2021-04-06 04:12:03

首先,相似之处: React 和 React Native (RN) 都旨在创建灵活的用户界面。这些框架有很多好处,但最重要的一点是它们是为 UI 开发而设计的。Facebook 在 React 几年后开发了 RN。

React: Facebook 设计的这个框架几乎就像在 HTML/XML 中编写 JavaScript 一样,这就是为什么这些标签被称为“ JSX ”(JavaScript XML)并且类似于熟悉的类 HTML 标签,例如<div><p>React 的一个标志是大写字母标签,它表示一个自定义组件,例如<MyFancyNavbar />,它也存在于 RN 中。然而,React 使用DOMDOM 存在于 HTML 中,因此 React 用于 Web 开发。

React Native: RN 不使用 HTML,因此不用于 Web 开发。它用于……几乎所有其他用途!移动开发(iOS 和 Android)、智能设备(例如手表、电视)、增强现实等。 由于 RN 没有可与之交互的 DOM,而不是使用 React 中使用的相同类型的 HTML 标签,它使用自己的然后被编译成其他语言的标签。例如,<div>RN 开发人员不使用标签,而是使用 RN 的内置<View>标签,它会在后台编译成其他本机代码(例如android.view在 Android 上;UIView在 iOS 上)。

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

把这个答案放在首位
2021-04-08 04:12:03

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

React Native 使用 React 框架为移动应用程序构建组件。React Native 为 iOS 和 Android 平台提供了一组基本的组件。React Native 中的一些组件是 Navigator、TabBar、Text、TextInput、View、ScrollView。这些组件在内部使用原生 iOS UIKit 和 Android UI 组件。React Native 还支持 NativeModules,其中 iOS 用 ObjectiveC 和 Android 用 Ja​​va 编写的代码可以在 JavaScript 中使用。