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






try   react   onpress   native教學   example   docs   javascript   reactjs   react-native   javascript-framework  


javascript-framework