javascript - shouldcomponentupdate - React Native和React之间有什么区别?




react react native (18)

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


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

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

  1. 当您在React-Native中经常使用 <View><Text> 标签时,React.js使用诸如 <div> <h1> <h2> 类的Web html标签,它们只是web /移动开发词典中的同义词。

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

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



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


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

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


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


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

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

medium.com/@alexmngn/…


为了回应来自 @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> 标签。


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

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


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

(2018年更新)

ReactJS

主要 关注点 Web开发

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

ReactNative

扩展了react ,定位于 移动开发。

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

希望我能帮到你:)


正如您所说,Google无法向您解释这一点,但是Google会很高兴如果他们发明了React。

这是 React 项目

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

React虚拟域模型 相比,DOM完全刷新的速度较慢,后者仅刷新页面的一部分(阅读:部分刷新)。

正如您从该 video 了解的那样,Facebook并未发明React,因为他们立即了解到部分刷新将比传统刷新更快。 最初,他们需要一种减少Facebook应用程序重建时间的方法,幸运的是,这使部分DOM焕然一新。

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

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

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

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

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

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


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

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

react + react-dom =网站开发

反应+本机=移动发展


这是我所了解的差异:

  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 是Javascript库,用于构建诸如Facebook之类的大型/小型界面Web应用程序。

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

两者均由Facebook开源。


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

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


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


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


阵营:

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 是使用 javascript JSX 来提供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


首先,相似之处: react&react-native(RN)均旨在允许开发人员创建灵活的用户界面。 这些框架有很多好处,但是最根本的收获是它们是用于UI开发的。

React: Facebook(在 React 之后几年开发了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标签,而是使用自己的标签,然后将其编译成其他语言。 例如,RN开发人员将使用RN的内置 <View> 标签而不是 <div> 标签,该标签将在后台编译为其他本机代码(例如,Android上的 android.view ; iOS上的 UIView )。

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





javascript-framework