首页   技术笔记   网址导航   Json在线解析   二维码   Ip地址查询   在线流程图  
新用户注册 | 会员登录
当前位置:  开发笔记 > 编程语言 > 正文

React Native和React有什么区别？

作者：coco2冰冰 | 2023-09-08 11:44
如何解决《ReactNative和React有什么区别？》经验，为你挑选了19个好方法。

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



1> Nader Dabit..：

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

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

两者都是Facebook开源的.

那么,如果我在反应原生中构建应用程序,可以在reactJS中重用任何/所有应用程序,反之亦然？
@MelAdane该海报可能是指在NodeJS上使用ReactJS库以创建预构建文件(使用类似Webpack的东西),然后可以将其作为静态文件提供给客户端.
@RaviManiyar不,您可以重用您的业务逻辑,但不能重复使用您的ui代码.React Native使用本机ui组件,而React.JS使用的是web,ui是使用html组件和css构建的
如果我使用react构建webapp,可以使用react native在移动应用程序中使用相同的HTML/JS代码吗？
@LemuelAdane这是Facebook上有关如何完成此工作的文章：https://facebook.github.io/react/docs/environments.html。这是一个很好的介绍，介绍了如何实现此目的：http://maketea.co.uk/2014/06/30/building-robust-web-apps-with-react-part-4.html

2> prosti..：

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

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

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

与React virtual-dom模型相比,DOM完全刷新速度较慢,后者仅刷新部分页面(读取:部分刷新).

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

React native(https://github.com/facebook/react-native)只是React的结果.它是一个使用JavaScript构建本机应用程序的平台.

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

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

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

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

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

我个人更喜欢这个答案,因为它更详细,提供了进一步解释的链接.
我也喜欢这个答案。“在React Native之前……”不要忘了还有Xamarin。;）

3> Alireza..：

阵营:

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顶部的额外库,用于制作本机app iOS和Android设备.

反应代码示例:

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 (
      

        
Hello, world!

        
It is {this.state.date.toLocaleTimeString()}.

      

    );
  }
}

ReactDOM.render(
  ,
  document.getElementById('root')
);


React Native代码示例:

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

class WhyReactNativeIsSoGreat extends Component {
  render() {
    return (
      
        
          If you like React on the web, you'll like React Native.
        
        
          You just use native components like 'View' and 'Text',
          instead of web components like 'div' and 'span'.
        
      
    );
  }
}

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

https://facebook.github.io/react

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

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

您的代码示例很有用,但看到在每个框架中实现SAME组件会更好
您的答案应该是可接受的答案,我来到这里寻找React和React Native是否具有相同的体系结构,如果代码看起来相同而不是两个库的定义.

4> vijayst..：

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中使用.



5> 小智..：

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

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

    当你使用像标签,在阵营本土非常频繁,React.js使用网页html标签一样

    ,这是只有在网络/移动开发字典同义词.

    对于React.js,您需要DOM用于html标记的路径呈现,而对于移动应用程序:React-Native使用AppRegistry注册您的应用程序.

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



6> Ryo-code..：

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

React: Facebook(反应后几年开发了RN)设计这个框架几乎就像在HTML/XML中编写JavaScript一样,这就是为什么标签被称为" JSX "(JavaScript XML)(例如熟悉的HTML-像标签,如

或

).React的标志是大写字母标签,它表示自定义组件,例如,对于RN也是如此.但是,它们的不同之处在于React使用DOM.由于DOM存在于HTML中,因此React用于Web开发.

React Native: RN不使用HTML,因此它不用于Web开发.它几乎用于其他一切!移动开发(iOS和Android),智能设备(例如手表,电视),增强现实等等.由于RN没有与之交互的DOM,而是使用React中使用的相同类型的HTML标签,它使用自己的然后编译成其他语言的标记.例如,

RN开发人员将使用RN的内置标签代替标签,该标签将编译为引擎盖下的其他本机代码(例如,android.view在Android上;以及UIView在iOS上).

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



7> 小智..：

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

(2018年更新)

ReactJS

主要关注点:Web开发

    React的虚拟DOM比传统的完全刷新模型更快,因为虚拟DOM只刷新页面的一部分.

    您可以在React JS中重用代码组件,从而节省大量时间.(你也可以在RN)

    作为业务:从服务器到浏览器完全呈现您的页面将改善您的Web应用程序的SEO.

    它提高了调试速度,使您的开发人员的生活更轻松.

    您可以使用混合移动应用程序开发,如Cordova或Ionic来构建移动应用程序,使用ReactJS,但可以从许多方面更有效地使用React Native构建移动应用程序.

ReactNative

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

    它的主要焦点 - >全是关于移动用户界面.

    iOS和Android覆盖.

    可重复使用的 React Native UI 组件和模块,允许混合应用程序本机呈现.

    无需彻底检查旧应用程序.您所要做的就是将React Native UI组件添加到现有应用程序的代码中,而无需重写.

    不使用HTML来呈现应用程序.提供以类似方式工作的替代组件,因此不难理解它们.

    因为您的代码不会在HTML页面中呈现,这也意味着您将无法重用以前与ReactJS一起使用的任何库,这些库可以呈现任何类型的HTML,SVG或Canvas.

    React-Native不是由Web元素构成的,不能以相同的方式设置样式.再见CSS动画

希望我帮助你:)



8> Manzoor Sama..：

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

    React native有一组独立的标签,用于定义移动用户界面,但两者都使用JSX来定义组件.

    两个系统的主要目的是开发可重用的UI组件并通过其组合减少开发工作.

    如果您正确规划和构建代码,则可以使用相同的移动和Web业务逻辑

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



9> Bipon Biswas..：

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

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

更多信息



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的知识.



11> Necronet..：

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

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



12> Sharlon M. B..：

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

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



13> 小智..：

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

React Native允许您仅使用JavaScript构建移动应用程序,它用于移动应用程序开发.更多信息请访问https://facebook.github.io/react-native/docs/getting-started.html



14> iPragmatech..：

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

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



15> 小智..：

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

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



16> 小智..：

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



17> 小智..：

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

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

react + react-dom =网站开发

反应+本机=移动发展



18> 小智..：

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



19> Ashish Pisey..：

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

React Native是一个javascript框架，它包含编写多平台应用程序（如iOS或Android）所需的一切。您需要安装xcode和android studio才能构建和部署您的应用。

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

推荐阅读
devbox
coco2冰冰
这个屌丝很懒，什么也没留下！
关注作者
Tags | 热门标签
RankList | 热门文章
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有