类比HTML元素与原生组件

React Native 在设计上采用了与 React 类似的组件化开发思想，但它的目标是构建原生移动应用程序（如Android和iOS应用），而非Web应用。因此，尽管React Native借鉴了React的JSX语法和组件化理念，它并不直接使用HTML元素，而是通过JavaScript来创建原生平台（如Android的Java或Kotlin、iOS的Objective-C或Swift）的等效UI组件。

HTML元素与React Components

在传统的Web开发中，我们使用HTML元素（如<div>, <button>, <img>等）来构建页面结构，并通过CSS来控制样式，而React则是利用JavaScript构建这些元素的“虚拟DOM”表示，然后React负责高效地将这些变化同步到实际的DOM上，提高了UI的更新效率。

React Native与原生组件

React Native则将这种思想应用于原生应用开发：

• 替代HTML元素：React Native提供了自己的组件库，这些组件如<View>（类似HTML的<div>）、<Text>（代替<span>或<p>）、<Image>、<Button>等，它们在底层会被映射为对应的原生UI控件。例如，<View>在Android上可能对应一个FrameLayout或LinearLayout，在iOS上则可能是一个UIView。

• 原生组件支持：除了基本组件外，React Native允许开发者直接访问和使用平台特定的原生组件，这意味着你可以调用Android或iOS的任何原生功能，通过封装这些原生组件为JavaScript模块，使得它们能像其他React Native组件一样被JavaScript代码使用。

• 样式系统：React Native采用了一套与CSS类似的样式系统，但它是专门为原生应用设计的，不使用CSS文件，而是在JavaScript中直接定义样式对象。

概括来说

React Native可以看作是React在原生应用开发领域的一种扩展，它用JavaScript和一套跨平台的组件模型替代了HTML和部分Web技术栈，同时保留了React的核心理念：声明式编程、组件化和虚拟DOM概念，只是这里的“DOM”操作被转换为了对原生UI组件的操作。这样，开发者可以用近乎一致的代码基础开发出同时兼容多个平台的原生用户体验的应用程序。

原文链接: https://www.yukx.com/xiaomengbao/article/details/2515.html 优科学习网类比HTML元素与原生组件