javascript - try - React Native和React有什麼區別?




reactjs vs react native (16)

我出於好奇心開始學習 React ,想知道React和React Native之間的區別 - 雖然用谷歌找不到滿意的答案。 React和React Native似乎具有相同的格式。 他們的語法完全不同嗎?


  1. React-Native是一個用於開發Android和iOS應用程序的框架,它共享80%-90%的Javascript代碼。

而React.js是用於開發Web應用程序的父Javascript庫。

  1. 在React-Native中經常使用像 <View><Text> 這樣的標籤時,React.js使用web標籤,如 <div> <h1> <h2> ,它們只是網絡/移動開發詞典中的同義詞。

  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組件層次結構的框架。 每個組件都有狀態和道具。 數據通過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中使用。


React是一個用於構建用戶界面的聲明性,高效且靈活的JavaScript庫。您的組件告訴React您要呈現的內容 - 然後當數據發生更改時,React將有效地更新並呈現正確的組件。 這裡,ShoppingList是一個React組件類,或React組件類型。

React Native應用程序是一個真正的移動應用程序。 使用React Native,您不會構建“移動Web應用程序”,“HTML5應用程序”或“混合應用程序”。 您構建了一個真正的移動應用程序,它與使用Objective-C或Java構建的應用程序無法區分。 React Native使用與常規iOS和Android應用相同的基本UI構建塊。

medium.com/@alexmngn/…


以下是我所知道的差異:

  1. 它們有不同的html標籤:React Native用於處理文本而不是React。
  2. React Native使用Touchable組件而不是常規按鈕元素。
  3. React Native具有用於呈現列表的ScrollView和FlatList組件。
  4. React Native使用AsyncStorage,而React使用本地存儲。
  5. 在React Native路由器中作為堆棧運行,而在React中,我們使用Route組件進行映射導航。

我們無法準確地比較它們。 用例 存在 差異

(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動畫

希望我幫助你:)


簡單來說,ReactJS是父庫,它根據主機環境(瀏覽器,移動設備,服務器,桌面等)返回要呈現的內容。 除了渲染它還提供其他方法,如生命週期鉤..等。

在瀏覽器中,它使用另一個庫react-dom來呈現DOM元素。 在移動設備中,它使用React-Native組件來呈現特定於平台(IOS和Android)的本機UI組件。 所以,

反應+反應-dom = web開發

反應+反應原生=移動發展


簡單來說,React和React本機遵循相同的設計原則,除了設計用戶界面的情況。

  1. React native有一組獨立的標籤,用於定義移動用戶界面,但兩者都使用JSX來定義組件。
  2. 兩個系統的主要目的是開發可重用的UI組件並通過其組合減少開發工作量。
  3. 如果您正確規劃和構建代碼,則可以使用相同的移動和Web業務邏輯

無論如何,它是一個很好的庫,可以為移動和Web構建用戶界面。


關於組件生命週期和所有其他花里胡哨,它大致是相同的。

差異主要是使用的JSX標記。 React使用類似於html的一個。 另一個是react-native用於顯示視圖的標記。


ReactJS 是一個JavaScript庫,支持前端Web和在服務器上運行,用於構建用戶界面和Web應用程序。

React Native 是一個移動框架,可編譯為本機應用程序組件,允許您使用JavaScript為不同平台(iOS,Android和Windows Mobile)構建本機移動應用程序,允許您使用ReactJS構建組件,並在其下實現ReactJS。引擎蓋。

兩者都是Facebook開源的。


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

由於React是基本抽象,因此一般語法和工作流是相同的,但是你要使用的組件是非常不同的,因此你需要學習這些與React內聯的所謂的moto,即所謂的moto,即“隨時隨地學習”,因為如果你知道React(基礎抽象)你可以簡單地學習平台之間的差異,而無需學習另一種編程語言,語法和工作流程。


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

  • 它遵循基於組件的方法,有助於構建
    可重用的UI組件
    • 它用於開發複雜的交互式Web和移動UI
    • 儘管它僅在2015年開源,但它擁有支持它的最大社區之一。

ReactNative - React Native是一個開源移動應用程序框架。


ReactJS 是一個 javascript庫 ,用於構建Web界面。 您需要一個像webpack這樣的捆綁器,並嘗試安裝構建您的網站所需的模塊。

React Native 是一個 javascript框架 ,它帶有編寫多平台應用程序(如iOS或Android)所需的一切。 你需要安裝xcode和android studio來構建和部署你的應用程序。

與ReactJS不同,React-Native不使用HTML,而是可以使用ios和android來構建應用程序的類似組件。 這些組件使用真正的本機組件來構建ios和Android應用程序。 由於這種React-Native應用程序與其他混合開發平台不同,因此感覺真實。 組件還可以提高代碼的可重用性,因為您無需在ios和android上再次創建相同的用戶界面。


陣營:

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頂部的額外庫,用於為 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 website:

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







javascript-framework