React 與 React Native 的異同

Irakli Tchigladze 2022年5月18日
React 與 React Native 的異同

React 是一個流行的前端庫,用於建立具有視覺吸引力的 UI。它由 Facebook 建立和維護。

最初,它僅用於開發 Web 應用程式。最初發布後不久,開發人員意識到 React 可以建立智慧手機應用程式。

這就是 React Native 的由來。

常規的 ReactJS 和 React Native 現在是兩個獨立的庫。它們在很多方面相似,但也不同。

開發人員經常對這些差異感到好奇,並想知道他們是否可以將他們的 React Native 程式碼用於 Web 應用程式,反之亦然。本文想澄清一些關於 React 和 React Native 的常見誤解。

ReactJS 與 React Native

React 開發人員經常好奇他們是否可以使用他們的常規 JavaScript 程式碼在 React Native 中構建類似的介面。最簡潔的答案是不。

但是,這兩個 React 庫背後的許多底層原理和思想是相同的。到本文結束時,你應該瞭解它們的相似之處和不同之處。

什麼是 ReactJS

Facebook 首先開發了 ReactJS 庫,因為這家技術巨頭需要一個 JavaScript 解決方案來更好地管理 DOM 更改。

具體來說,Facebook 的開發人員想要一種在使用者收到新通知或新朋友請求時自動更新檢視的方法。

重新整理頁面以檢視更改是不切實際的。相反,Facebook 的團隊提出了 React,它具有虛擬 DOM 模型,並且只更新了頁面中發生變化的部分,而不是整個頁面。

它提高了頁面的速度,並允許使用者幾乎立即收到更新。

該框架的效率和靈活性使其迅速在 Web 開發人員中流行起來。

很快,人們意識到 ReactJS 背後的相同基本原理可以用於構建智慧手機和平板電腦應用程式。

這是一個使用 ReactJS 構建的最基本應用程式的示例。它僅由一個功能元件組成。

export default function App() {
  return (
    <div className="App">
      <h1>hello</h1>
    </div>
  );
}

你可以使用 useState() 掛鉤新增狀態功能,使用 useEffect() 掛鉤管理副作用,並在 codesandbox 上實現更復雜的結構。

什麼是 React Native

如前所述,React 是常規的 ReactJS 庫啟發了原生庫,兩者建立在相同的原則之上。

React Native 庫允許 JavaScript 開發人員在沒有 Java 或 Objective-C 語言知識的情況下構建原生應用程式。

該庫允許你編寫 JavaScript 程式碼,最終編譯為特定於平臺的程式碼。最終結果將與純粹用本機程式碼構建的應用程式沒有區別。

該框架還使你可以自由混合本機程式碼。

使用 React Native 構建的移動應用可以釋出到應用商店,供 iOS 和 Android 使用者下載。

ReactJS 和 React Native 之間的相似之處

這兩個庫有很多共同點。首先,ReactJS 和 React Native 都由 Facebook 維護。

兩者還旨在通過鼓勵元件的可重用性來促進開發過程。

此外,它們都使用 JSX,它是用於以宣告方式構建複雜 UI 的語法糖。JSX 程式碼最終被編譯為對兩個庫的 React.createElement 方法的呼叫。

ReactJS 和 React Native 的區別

最大的不同是 React 庫與 DOM 一起工作,它只在瀏覽器中可用,而不是智慧手機應用程式。此外,React 中的 JSX 最終將編譯為帶有 <h1><div> 元素的 HTML 結構。

另一方面,用 React Native 編寫的程式碼是原生應用程式檢視元件的替代品,例如 <View><Image> 等。這是常規 ReactJS 程式碼在 React Native 中不可重用的最大原因之一。

提出應用程式的業務邏輯是一個勞動密集型的過程。好訊息是,React 開發人員可以重用他們的業務邏輯並在 React Native 應用程式中實現它。

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn

相關文章 - React Native