React Native和React有什么区别?

问题描述 投票:521回答:23

我出于好奇心开始学习React,想知道React和React Native之间的区别 - 虽然用谷歌找不到满意的答案。 React和React Native似乎具有相同的格式。他们的语法完全不同吗?

javascript reactjs react-native javascript-framework
23个回答
577
投票

ReactJS是一个JavaScript库,支持前端Web和在服务器上运行,用于构建用户界面和Web应用程序。

React Native是一个移动框架,可编译为本机应用程序组件,允许您使用JavaScript为不同平台(iOS,Android和Windows Mobile)构建本机移动应用程序,允许您使用ReactJS构建组件,并在引擎盖下实现ReactJS 。

两者都是Facebook开源的。


10
投票

React Native主要使用JavaScript开发,这意味着您需要启动的大多数代码可以跨平台共享。 React Native将使用本机组件进行渲染。 React Native应用程序是以它所针对的平台所需的语言开发的,用于iOS的Objective-C或Swift,用于Android的Java等等。编写的代码不是跨平台共享的,它们的行为也各不相同。他们可以直接访问平台提供的所有功能,没有任何限制。

React是一个由Facebook开发的用于构建用户界面的开源JavaScript库。它用于处理Web和移动应用程序的视图层。 ReactJS用于创建可重用的UI组件。它目前是it领域中最受欢迎的JavaScript库之一,它具有强大的基础和大型社区。如果你学习了ReactJS,你需要具备JavaScript,HTML5和CSS的知识。


8
投票

React Js是一个Javascript库,您可以使用React开发和运行更快的Web应用程序。

React Native允许您仅使用JavaScript构建移动应用程序,它用于移动应用程序开发。更多信息在这里REACT


8
投票

React-Native是一个框架,其中ReactJS是一个可以用于您的网站的JavaScript库。

React-native提供默认的核心组件(图像,文本),其中React提供了大量组件并使它们协同工作。


8
投票

React是React Native和React DOM的基本抽象,所以如果你要使用React Native,你也需要React ...与web相同,但是你需要React DOM而不是React Native。

由于React是基本抽象,因此一般语法和工作流是相同的,但是你要使用的组件是非常不同的,因此你需要学习这些与React内联的所谓的moto,即所谓的moto,即“随时随地学习”,因为如果你知道React(基础抽象)你可以简单地学习平台之间的差异,而无需学习另一种编程语言,语法和工作流程。


8
投票

简单来说,React和React本机遵循相同的设计原则,除了设计用户界面的情况。

  1. React native有一组独立的标签,用于定义移动用户界面,但两者都使用JSX来定义组件。
  2. 两个系统的主要目的是开发可重用的UI组件并通过其组合减少开发工作量。
  3. 如果您正确规划和构建代码,则可以使用相同的移动和Web业务逻辑

无论如何,它是一个很好的库,可以为移动和Web构建用户界面。


7
投票

关于组件生命周期和所有其他花里胡哨,它大致是相同的。

差异主要是使用的JSX标记。 React使用类似于html的一个。另一个是react-native用于显示视图的标记。


7
投票

React Native适用于移动应用程序,而React适用于网站(前端)。两者都是Facebook发明的框架。 React Native是一个跨平台开发框架,意味着可以为IOS和Android编写几乎相同的代码,它可以工作。我个人对React Native了解得更多,所以我会留下它。


4
投票

REACT NATIVE是Javascript库,用于构建像Facebook这样的大/小界面Web应用程序。

qazxswpoi是用于在Android,IOS和Windows Phone上开发本机移动应用程序的Javascript框架。

两者都是Facebook开源的。


4
投票

ReactJS是一个javascript库,用于构建Web界面。您需要一个像webpack这样的捆绑器,并尝试安装构建您的网站所需的模块。

React Native是一个javascript框架,它带有编写多平台应用程序(如iOS或Android)所需的一切。你需要安装xcode和android studio来构建和部署你的应用程序。

与ReactJS不同,React-Native不使用HTML,而是可以使用ios和android来构建应用程序的类似组件。这些组件使用真正的本机组件来构建ios和Android应用程序。由于这种React-Native应用程序与其他混合开发平台不同,因此感觉真实。组件还可以提高代码的可重用性,因为您无需在ios和android上再次创建相同的用户界面。


4
投票

React Js正在使用HTML Dom进行操作。但React native正在使用移动(iOS / android)本机ui组件进行操作。


201
投票

正如你所说,谷歌无法向你解释这一点,但如果他们发明了React,谷歌会非常高兴。

这是React项目(https://github.com/facebook/react)。

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

React virtual-dom model相比,DOM完全刷新速度较慢,video仅刷新部分页面(读取:部分刷新)。

正如你从这个https://github.com/facebook/react-native可以理解的那样,Facebook并没有发明React,因为他们立刻明白部分刷新会比传统刷新更快。最初他们需要一种方法来减少Facebook应用程序重建时间,幸运的是这使部分DOM刷新生活。

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

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

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

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

15%的代码是特定于平台的。特定于平台的JavaScript提供了平台风格(并且在体验上有所不同)。

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


3
投票

以下是我所知道的差异:

  1. 它们有不同的html标签:React Native用于处理文本而不是React。
  2. React Native使用Touchable组件而不是常规按钮元素。
  3. React Native具有用于呈现列表的ScrollView和FlatList组件。
  4. React Native使用AsyncStorage,而React使用本地存储。
  5. 在React Native路由器中作为堆栈运行,而在React中,我们使用Route组件进行映射导航。

3
投票

简单来说,ReactJS是父库,它根据主机环境(浏览器,移动设备,服务器,桌面等)返回要呈现的内容。除了渲染它还提供其他方法,如生命周期钩..等。

在浏览器中,它使用另一个库react-dom来呈现DOM元素。在移动设备中,它使用React-Native组件来呈现特定于平台(IOS和Android)的本机UI组件。所以,

react + react-dom = web开发

react + react-native =移动开发


2
投票

reactjs使用的是react-dom而不是浏览器dom,而本机反应使用虚拟dom,但是两者使用相同的语法,即如果你可以使用reactjs那么你可以使用react本机。因为你在reactjs中使用的大多数库都可以在本机中使用就像你的反应导航和他们共同的其他常见库一样。


2
投票

总结:React.js用于Web开发,而React-Native用于移动应用程序开发


0
投票

React Js - React JS是前端javascript库,它的大型库不是框架

  • 它遵循基于组件的方法,有助于构建 可重用的UI组件 它用于开发复杂的交互式Web和移动UI 尽管它仅在2015年开源,但它拥有支持它的最大社区之一。

ReactNative - React Native是一个开源移动应用程序框架。


73
投票

阵营:

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顶部的额外库,用于为Androidimport 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') ); 设备制作本机应用程序。

反应代码示例:

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

https://facebook.github.io/react

有关React的更多信息,请访问facebook的官方网站:

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

有关React Native的更多信息,请访问React native website:

<View>


46
投票

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的ObjectiveC和用于Android的Java编写的代码可以在JavaScript中使用。


30
投票
  1. React-Native是一个用于开发Android和iOS应用程序的框架,它共享80%-90%的Javascript代码。

而React.js是用于开发Web应用程序的父Javascript库。

  1. 当你在React-Native中经常使用像<Text><div>这样的标签时,React.js使用网页html标签,如<h1> <h2> <div>,它们只是网络/移动开发词典中的同义词。
  2. 对于React.js,您需要DOM用于html标记的路径呈现,而对于移动应用程序:React-Native使用AppRegistry注册您的应用程序。

我希望这是React.js和React-Native中快速差异/相似之处的简单解释。


17
投票

首先,相似之处:反应和反应原生(RN)都被设计为允许开发人员创建灵活的用户界面。这些框架有很多好处,但最基本的内容是它们是用于UI开发的。

React:Facebook(反应后几年开发了RN)设计这个框架几乎就像在HTML / XML中编写JavaScript一样,这就是为什么标签被称为“JSX”(JavaScript XML)(例如熟悉的HTML-像<p><MyFancyNavbar />这样的标签。 React的标志是大写字母标签,它表示自定义组件,例如the DOM,对于RN也是如此。但是,它们的不同之处在于React使用<div>。由于DOM存在于HTML中,因此React用于Web开发。

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

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


13
投票

我们无法准确地比较它们。用例存在差异。

(2018年更新)


ReactJS

主要关注点:Web开发

  1. React的虚拟DOM比传统的完全刷新模型更快,因为虚拟DOM只刷新页面的一部分。
  2. 您可以在React JS中重用代码组件,从而节省大量时间。 (你也可以在RN)
  3. 作为业务:从服务器到浏览器完全呈现您的页面将改善您的Web应用程序的SEO。
  4. 它提高了调试速度,使您的开发人员的生活更轻松。
  5. 您可以使用混合移动应用程序开发,如Cordova或Ionic来构建移动应用程序,使用ReactJS,但可以从许多方面更有效地使用React Native构建移动应用程序。

反应原生

反应的延伸,适用于移动开发。

  1. 它的主要焦点 - >全是关于移动用户界面。
  2. iOS和Android覆盖。
  3. 可重复使用的React Native UI组件和模块,允许混合应用程序本机呈现。
  4. 无需彻底检查旧应用程序。您所要做的就是将React Native UI组件添加到现有应用程序的代码中,而无需重写。
  5. 不使用HTML来呈现应用程序。提供以类似方式工作的替代组件,因此不难理解它们。
  6. 因为您的代码不会在HTML页面中呈现,这也意味着您将无法重用以前与ReactJS一起使用的任何库,这些库可以呈现任何类型的HTML,SVG或Canvas。
  7. React-Native不是由Web元素构成的,也不能以相同的方式设置样式。再见CSS动画

希望我帮助你:)


12
投票

React是一个用于构建用户界面的声明性,高效且灵活的JavaScript库。您的组件告诉React您要呈现的内容 - 然后当数据发生更改时,React将有效地更新并呈现正确的组件。这里,ShoppingList是一个React组件类,或React组件类型。

React Native应用程序是一个真正的移动应用程序。使用React Native,您不会构建“移动Web应用程序”,“HTML5应用程序”或“混合应用程序”。您构建了一个真正的移动应用程序,它与使用Objective-C或Java构建的应用程序无法区分。 React Native使用与常规iOS和Android应用相同的基本UI构建块。

https://facebook.github.io/react-native/docs/getting-started.html


10
投票

ReactJS是一个核心框架,用于构建基于反应模式隔离的组件,您可以将其视为来自MVC的V,尽管我想声明反应确实带来了不同的感觉,特别是如果您不太熟悉反应模式。

ReactNative是另一个层,旨在为Android和iOS平台提供常见的集合组件。所以代码看起来与ReactJS基本相同,因为它是ReactJS,但它在移动平台中本机加载。您还可以根据操作系统将更复杂的平台相关API与Jav​​a / Objective-C / Swift联系起来,并在React中使用它。

© www.soinside.com 2019 - 2024. All rights reserved.