React Native和React有什么区别？

Question

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

Answer 1

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

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

两者都是Facebook开源的.

Answer 2

正如你所说,谷歌无法向你解释这一点,但如果他们发明了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提供了平台风格(并且在体验上有所不同).

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

Answer 3

阵营:

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 (
      <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 website:

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

Answer 4

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

Answer 5

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

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

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

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

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

Answer 6

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

React: Facebook(反应后几年开发了RN)设计这个框架几乎就像在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标签,它使用自己的然后编译成其他语言的标记.例如,<div>RN开发人员将使用RN的内置标签代替标签,该<View>标签将编译为引擎盖下的其他本机代码(例如,android.view在Android上;以及UIView在iOS上).

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

Answer 7

我知道已经有很多答案了，但在阅读了所有这些之后，我相信仍有解释的余地​​。

反应

React = Vanilla JS + ES6 + HTML + CSS = JSX = Web 应用程序（前端）

所以，让我们来谈谈阵营首先是因为阵营本土也是基于反应和JS的相同的概念一直使用。

React 是一个JS库，用于制作美观、灵活、高性能的 单页 Web 应用程序，所以现在你脑海中会出现一个问题，什么是单页 Web 应用程序。

单页应用程序

单页应用程序是在浏览器中运行的应用程序，在使用过程中不需要重新加载页面。您每天都在使用这些类型的应用程序。例如：Gmail、Google 地图、Facebook 或 GitHub. SPA 旨在通过尝试模仿浏览器中的“自然”环境来提供出色的用户体验——没有页面重新加载，没有额外的等待时间。这只是您访问的一个网页，然后使用 JavaScript 加载所有其他内容 - 他们严重依赖这些内容。SPA 独立请求标记和数据，并直接在浏览器中呈现页面。我们可以做到这一点，这要归功于 AngularJS、Ember.js、Meteor.js、Knockout.js、React.js、Vue.js 等高级 JavaScript 框架。单页站点有助于将用户保持在一个舒适的 Web 空间中，在该空间中，内容以简单、容易且可行的方式呈现给用户。

这个怎么运作

现在您知道什么是 SPA，因此您知道它是一个 Web 应用程序，因此它将使用 HTML 元素运行到浏览器中，并使用 JS 来处理与这些元素相关的所有功能。它使用Virtual DOM来呈现组件中的新变化。

反应原生

现在你对react有了一些了解，让我们来谈谈 react-native

React-Native = React (Vanilla JS + ES6 + JS 和 Native 代码之间的桥梁) + Native(iOS, Android) = Mobile Apps(Android, iOS, 也支持 web 但有一些限制)

React-Native 用于使用 React 制作漂亮的跨平台移动应用程序（Android、iOS）。

这个怎么运作

在 React-Native 中有两个线程。

1. JS线程

2. 本地线程

所有 React 代码在JS 线程内执行，最终值传递给本地线程，后者使用最终值在屏幕上绘制布局。

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

React 使用 Async Bridge 以 JSON 格式将数据传递给 Native 线程称为 React-Native

因此，我们使用 Native 组件在 react-native 中制作展示视图，并使用该桥梁在这两个不同的世界之间进行通信。

JS 线程足够快来执行 JavaScript，而原生线程也足够快来执行原生代码，但是由于 React 使用异步桥在这两个世界之间进行通信，因此重载这个桥会导致性能问题。

我们来谈谈这两个框架的共同点和不同点。

特征	反应	反应原生
平台	网络	安卓、iOS、网页
开源	是的	是的
用户界面	HTML + CSS	原生组件（iOS、Android）
建筑学	虚拟DOM	虚拟 DOM + 桥接
动画	CSS 动画	原生动画
造型	CSS	JS 样式表
由开发	Facebook	Facebook

Answer 8

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

(2018年更新)

ReactJS

主要关注点:Web开发

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

ReactNative

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

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动画

希望我帮助你:)

Answer 9

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

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

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

Answer 10

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

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

更多信息

Answer 11

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

Answer 12

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

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

Answer 13

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

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

Answer 14

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

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

Answer 15

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

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

Answer 16

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

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

Answer 17

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

Answer 18

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

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

react + react-dom =网站开发

反应+本机=移动发展

Answer 19

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

Answer 20

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

Answer 21

聚会有点晚了，但这里有一个更全面的答案和例子：

反应

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

React 和 React Native 之间的组件不能互换，因为 React Native 映射到原生移动 UI 元素，但可以重用业务逻辑和非渲染相关代码。

响应DOM

最初包含在 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 的FlatList. React Native 可用于构建 IOS/Android 移动应用程序，以及智能手表和电视。

世博会

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

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 端处理所有内容的性能更高。前任。映射组件以构建列表与使用 flatlist
• 细微的差别：比如onClickturn into onPress，React Native 使用样式表以更高效的方式定义样式，React Native 使用 flexbox 作为默认布局结构来保持响应。
• 由于 React Native 中没有传统的“DOM”，因此 React 和 React Native 只能使用纯 javascript 库

反应360

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

Answer 22

ReactJS

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

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

• 它负责UI组件的渲染，被认为是MVC框架的V部分。

• React 的虚拟 DOM 比传统的完全刷新模型更快，因为虚拟 DOM 只刷新页面的一部分，从而减少了页面刷新时间。

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

  反应本机

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

• React Native 拥有 ReactJS 的所有优点

• React Native 允许开发人员以 Web 风格的方式创建原生应用程序。