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