javascript - try - React Native和React有什麼區別?
reactjs vs react native (16)
- React-Native是一個用於開發Android和iOS應用程序的框架,它共享80%-90%的Javascript代碼。
而React.js是用於開發Web應用程序的父Javascript庫。
-
在React-Native中經常使用像
<View>
,<Text>
這樣的標籤時,React.js使用web標籤,如<div>
<h1>
<h2>
,它們只是網絡/移動開發詞典中的同義詞。 -
對於React.js,您需要DOM用於html標記的路徑呈現,而對於移動應用程序:React-Native使用AppRegistry註冊您的應用程序。
我希望這是React.js和React-Native中快速差異/相似之處的簡單解釋。
我出於好奇心開始學習 React ,想知道React和React Native之間的區別 - 雖然用谷歌找不到滿意的答案。 React和React Native似乎具有相同的格式。 他們的語法完全不同嗎?
React Js是一個Javascript庫,您可以使用React開發和運行更快的Web應用程序。
React Native允許您僅使用JavaScript構建移動應用程序,它用於移動應用程序開發。 更多信息請訪問 https://facebook.github.io/react-native/docs/getting-started.html
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構建塊。
以下是我所知道的差異:
- 它們有不同的html標籤:React Native用於處理文本而不是React。
- React Native使用Touchable組件而不是常規按鈕元素。
- React Native具有用於呈現列表的ScrollView和FlatList組件。
- React Native使用AsyncStorage,而React使用本地存儲。
- 在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本機遵循相同的設計原則,除了設計用戶界面的情況。
- React native有一組獨立的標籤,用於定義移動用戶界面,但兩者都使用JSX來定義組件。
- 兩個系統的主要目的是開發可重用的UI組件並通過其組合減少開發工作量。
- 如果您正確規劃和構建代碼,則可以使用相同的移動和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: