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

2020/09/21 06:01 · javascript ·  · 0评论

我已经出于好奇而开始学习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调用。JSX深入

两者均由Facebook开源。

这是React项目

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

React虚拟dom模型相比,DOM全刷新要慢一些,后者仅刷新页面的一部分(阅读:部分刷新)。

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

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

在使用React native之前,您需要了解Android的Java或iPhone和iPad的Objective-C才能创建本地应用。

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

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

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

最酷的是该平台特定的代码-已经编写好了,因此您只需要使用它即可。

反应:

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

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

React native使用React框架为移动应用程序构建组件。React native提供了适用于iOS和Android平台的一组基本组件。React Native中的一些组件是Navigator,TabBar,Text,TextInput,View,ScrollView。这些组件在内部使用本机iOS UIKit和Android UI组件。React native还允许使用NativeModules,在JavaScript中可以使用用ObjectiveC for iOS和Java用Android编写的代码。

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

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

  1. React-Native是用于开发Android和iOS应用程序的框架,该框架共享Java代码的80%-90%。

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

  1. 当你使用像标签<View><Text>非常频繁的阵营本地的,React.js使用网页html标签一样<div> <h1> <h2>,这是只有在网络/移动开发字典同义词。

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

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

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

(2018年更新)


ReactJS

React以Web开发为主要重点

    • 由于虚拟DOM仅刷新页面的一部分,因此React的虚拟DOM比常规的完整刷新模型要快
    • 您可以在React中重用代码组件,从而节省大量时间。(您也可以在React Native中。)
    • 作为一家企业:从服务器到浏览器的页面完全呈现将改善Web应用程序的SEO
    • 提高了调试速度,使您的开发人员的生活更加轻松。
    • 您可以使用混合移动应用程序开发(例如Cordova或Ionic)来使用React构建移动应用程序,但是从许多方面来看,它可以更有效地使用React Native来构建移动应用程序。

反应本机

React的扩展,紧随移动开发。

    • 它的主要重点是关于移动用户界面
    • 涵盖了iOS和Android
    • 可重用的 React Native UI 组件和模块允许混合应用程序本地渲染。
    • 无需检修您的旧应用程序。您要做的就是将React Native UI组件添加到现有应用程序的代码中,而无需重写。
    • 不使用HTML呈现应用程序提供以类似方式工作的替代组件,因此您不难理解它们。
    • 因为您的代码无法在HTML页面中呈现,这也意味着您将无法重用以前与React一起使用的任何可呈现任何类型的HTML,SVG或Canvas的库。
    • React Native不是由Web元素制成的,并且不能以相同的方式设置样式。再见CSS动画!

希望我能帮到你:)

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

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

无论如何,它是为移动和Web构建用户界面的出色库。

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

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

更多信息

ReactJS是一个核心框架,旨在构建基于反应式模式隔离的组件,您可以将其视为MVC中的V,尽管我想指出react确实带来了不同的感受,特别是如果您不太熟悉反应式概念。

ReactNative是另一层,旨在为Android和iOS平台提供一组通用的组件。因此,代码看起来与ReactJS基本相同,因为它是ReactJS,但是它是在移动平台中本地加载的。您还可以根据操作系统在Java / Objective-C / Swift中桥接更复杂和平台相关的API,并在React中使用它。

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

ReactReact NativeReact DOM的基础抽象,因此,如果要使用React Native,则还需要React ...与Web相同,但是需要React DOM代替React Native。

由于React是基本的抽象,因此一般语法和工作流程是相同的,但是您将使用的组件是非常不同的,因此您将需要学习这些差异,这与React内联,即所谓的moto,即“在任何地方学习一次写入”,因为您知道React(base abstraction),您可以简单地了解平台之间的差异,而无需学习其他编程语言,语法和工作流程。

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

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

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

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

关于组件生命周期以及所有其他方面,它几乎是相同的。

区别主要是所使用的JSX标记。React使用类似于html的脚本。另一个是标记,react-native使用该标记显示视图。

React Native适用于移动应用程序,而React适用于网站(前端)。两者都是Facebook发明的框架。React Native是一个跨平台开发框架,意味着可以为IOS和Android编写几乎相同的代码,并且可以正常工作。我个人对React Native的了解更多,因此我将在此继续介绍。

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

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上再次创建相同的用户界面。

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

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

react + react-dom =网站开发

反应+反应本机=移动发展

REACT是Javascript库,用于构建诸如Facebook之类的大型/小型界面Web应用程序。

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

两者均由Facebook开源。

派对晚了一点,但是这里有一个更全面的答案和例子:

反应

React是一个基于组件的UI库,它使用“影子DOM”来有效地更新已更改的DOM,而不是为每次更改重建整个DOM树。它最初是为Web应用程序构建的,但现在也可以用于移动和3D / vr。

React和React Native之间的组件不能互换,因为React Native映射到本地移动UI元素,但是可以重新使用业务逻辑和与非渲染相关的代码。

ReactDOM

最初包含在React库中,但是一旦React被用于除Web以外的其他平台,就会被拆分。它充当DOM的入口点,并与React结合使用。

例:

import React from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    state = {
        data: [],
    }

    componentDidMount() {
        const data = API.getData(); // fetch some data
        this.setState({ data })
    }

    clearData = () => {
        this.setState({
            data: [],
        });
    }

    render() {
        return (
            <div>
                {this.state.data.map((data) => (
                    <p key={data.id}>{data.label}</p>
                ))}
                <button onClick={this.clearData}>
                    Clear list
                </button>
            </div>
        );
    }

}

ReactDOM.render(App, document.getElementById('app'));

反应本机

React Native是一个跨平台的移动框架,它使用React并通过“桥”在Javascript与它的本机副本之间进行通信。因此,使用React Native时许多UI结构必须有所不同。例如:构建列表时,如果尝试使用map构建列表而不是React Native的列表,则会遇到主要的性能问题FlatListReact Native可用于构建IOS / Android移动应用程序以及智能手表和电视。

世博会

在启动新的React Native应用程序时,Expo是首选。

Expo是通用React应用程序的框架和平台。它是围绕React Native和本机平台构建的一组工具和服务,可帮助您在iOS,Android和Web应用程序上开发,构建,部署和快速迭代

注意:使用Expo时,只能使用它们提供的Native Api。您包括的所有其他库都必须是纯JavaScript,否则您需要退出expo。

使用React Native的相同示例:

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

export default class App extends Component {
    state = {
        data: [],
    }

    componentDidMount() {
        const data = API.getData(); // fetch some data
        this.setState({ data })
    }

    clearData = () => {
        this.setState({
            data: [],
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <FlatList
                    data={this.state.data}
                    renderItem={({ item }) => <Text key={item.id}>{item.label}</Text>}
                />
                <Button title="Clear list" onPress={this.clearData}></Button>
            </View>
        );
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
});

差异:

  • 注意,渲染之外的所有内容都可以保持不变,这就是为什么可以在React和React Native之间重用业务逻辑/生命周期逻辑代码的原因
  • 在React Native中,所有组件都需要从react-native或另一个UI库导入
  • 使用某些映射到本机组件的API通常会比尝试处理javascript方面的所有功能更具性能。例如 映射组件以构建列表与使用平面列表
  • 细微的差异:诸如onClickturn into之类的事情onPress,React Native使用样式表以更高效的方式定义样式,React Native使用flexbox作为默认布局结构来保持响应。
  • 由于React Native中没有传统的“ DOM”,因此只能在React和React Native中使用纯JavaScript库

React360

还值得一提的是,React也可以用于开发3D / VR应用程序。组件结构与React Native非常相似。https://facebook.github.io/react-360/

我知道已经有很多答案了,但是阅读完所有这些后,我相信这些仍然是可以解释的空间。

反应

React = Vaila JS + ES6 + HTML + CSS = JSX

因此,让我们讨论一下react,因为react-native也是基于react的,并且在那里使用了JS的相同概念。

React是一个JS库,用于制作美观,灵活,高性能的 单页Web应用程序,因此现在您会想到一个问题是什么是单页Web应用程序

单页应用

单页应用程序是在浏览器中运行的应用程序,在使用过程中不需要重新加载页面。您每天都在使用这种类型的应用程序。例如:Gmail,Google Maps,Facebook或GitHubSPA都是通过尝试模仿浏览器中的“自然”环境来提供出色的UX服务-没有页面重新加载,没有额外的等待时间。您访问的只是一个网页,然后使用JavaScript加载所有其他内容,而这些内容正是他们依赖的。SPA独立请求标记和数据,并直接在浏览器中呈现页面。我们可以使用AngularJS,Ember.js,Meteor.js,Knockout.js,React.js,Vue.js等高级JavaScript框架来完成此任务。单页站点有助于将用户保持在一个舒适的Web空间中,在该空间中,内容以简单,轻松和可行的方式呈现给用户。

这个怎么运作

现在您知道什么是SPA,所以您就知道它是一个Web应用程序,因此它将使用HTML元素运行到浏览器中,并且还使用JS处理与这些元素相关的所有功能。它使用Virtual Dom渲染组件中的新更改。

React-Native

现在您对反应有一些了解,所以让我们谈一下 反应本机

React-Native = React(Vaila JS + ES6 + JS与本机代码之间的桥梁)+ Native(IOS,Android)

React-Native用于使用React制作漂亮的跨平台移动应用(Android,IOS)。

这个怎么运作

在React-Native中有两个线程。

  1. JS线程

  2. 本机线程

JS线程执行所有计算并将数据传递给本机,如何?

React使用Async Bridge将数据以JSON格式传递到本机线程,称为react-native

因此,我们使用Native组件在react-native中创建演示视图,并使用该桥在这两个不同的世界之间进行通信。

让我们谈谈这两个框架之间的共同点和区别。

|---------------------|------------------|---------------------|
|      Feature        |     React        |  React-Native       |
|---------------------|------------------|---------------------|
|    Platform         |        Web       |  Android, IOS, JS   |
|---------------------|------------------|---------------------|
|   Open Source       |        Yes       |        Yes          |
|---------------------|------------------|---------------------|
| Presentational View |   HTML + CSS     | Native Components   |
|---------------------|------------------|---------------------|
|  Arichtecure        |  Virtual Dom     | Virtual Dom + Bridge|
|---------------------|------------------|---------------------|
|   Animations        | CSS Animations   | Native Animations   | 
|---------------------|------------------|---------------------|
|     Styling         |     CSS          | JS Stylesheets      |
|---------------------|------------------|---------------------|
|  Developed By       |  Facebook        |      Facebook       |
|---------------------|------------------|---------------------|

React vs React Native

ReactJS

  • React用于创建网站,Web应用程序,SPA等。

  • React是用于创建UI层次结构的Javascript库。

  • 它负责UI组件的呈现,被视为MVC框架的V部分。

  • 由于虚拟DOM仅刷新页面的一部分,因此React的虚拟DOM比常规的完全刷新模型要快,从而减少了页面刷新时间。

  • React使用组件作为UI的基本单元,可以重复使用这节省了编码时间。简单易学。

    反应本机

  • React Native是一个用于创建跨平台本机应用程序的框架。这意味着您可以创建本机应用程序,并且同一应用程序将在Android和ios上运行。

  • React native具有ReactJS的所有优点

  • React native允许开发人员以网络风格的方式创建本地应用。

这是我所知道的差异:

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

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

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

  • 它遵循基于组件的方法,该方法有助于构建

    可重用的UI组件

    • 它用于开发复杂的交互式Web和移动UI
    • 即使仅在2015年才开源,它还是支持它的最大社区之一。

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

为了回应来自@poshest的评论,这是先前在React中发布的Clock代码的React Native版本(对不起,我无法直接在此部分发表评论,否则我将在其中添加代码):

反应本机代码示例

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

class Clock extends 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 (
      <View style={styles.container}>
        <Text style={styles.sectionTitle}>Hello, world!</Text>
        <Text style={styles.sectionDescription}>It is {this.state.date.toLocaleTimeString()}.</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
    flex: 1,
    justifyContent: 'center',
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: 'black',
    alignSelf: 'center',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: 'darkgrey',
    alignSelf: 'center',
  },
});

AppRegistry.registerComponent("clock", () => Clock);

请注意,样式完全是我的选择,并不试图直接复制React代码中使用<h1><h2>标签。

一些区别如下:
1- React-Native是用于创建Mobile Apps的框架,其中ReactJS是可用于网站的javascript库。
2- React-Native在使用React时不使用HTML渲染应用程序。
3- React-Native仅用于开发Mobile App,而React用于网站和Mobile。

reactjs使用react-dom而不是浏览器dom,而react native使用虚拟dom,但是两者使用相同的语法,即如果可以使用reactjs,则可以使用react native。因为在reactjs中使用的大多数库都可以在react native中使用例如您的反应导航和它们共有的其他常见库。

反应本机

  • 它是使用JavaScript构建本机应用程序的框架。

  • 它可以编译为本地应用程序组件,从而使您可以构建本地移动应用程序。

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

React JS

  • 它支持前端Web并在服务器上运行,以构建用户界面和Web应用程序。

  • 它还允许我们创建可重用的UI组件。

  • 您可以在React JS中重用代码组件,从而节省大量时间。

本文地址:http://javascript.askforanswer.com/react-nativehereactzhijianyoushenmequbie.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇: