React JS DOM 与 React Native 组件树：全面的技术比较

介绍

reac++t js 和 react native 虽然共享核心原则，但在渲染和管理 ui 元素的方法上存在显着差异。本文对 react js 中使用的文档对象模型 (dom) 和 react native 使用的组件树结构进行了深入的技术比较，包括 react native 的新架构。

架构概览

react js 和 dom

react js 在 web 浏览器中运行，操作文档对象模型 (dom) 来渲染和更新用户界面。

主要特征：

1. 虚拟 dom：react js 使用虚拟 dom 作为抽象层。
2. 协调：在虚拟 dom 和实际 dom 之间协调更改。
3. html 元素：ui 组件最终呈现为标准 html 元素。

react native 和组件树

react native 专为移动平台设计，不与 dom 交互。相反，它管理特定于移动操作系统（ios 或 android）的本机组件树。

主要特征：

1. 原生组件：ui 元素映射到特定于平台的原生组件。
2. 桥接器：javascript 核心通过桥接器与本机模块进行通信。
3. 影子树：用 c++ 维护组件的影子树，用于布局计算。

react native 的新架构

react native 正在过渡到新的架构，该架构显着改变了它处理渲染和本机交互的方式：

1. fabric：一种新的渲染系统，可提高 ui 响应能力并允许更多并发操作。
2. turbomodules：增强的本机模块系统，提供类型安全接口和延迟加载功能。

渲染过程

反应js

1. jsx 被转换为 react.createelement() 调用。
2. 虚拟 dom 根据状态或 prop 更改进行更新。
3. 协调算法将虚拟 dom 与实际 dom 进行比较。
4. 必要的更新会批量并应用到真实的 dom。

<p>// react js component<br>
function webbutton({ onpress, title }) {<br>
  return (<br><button onclick="{onpress}" classname="web-button"><br>
      {title}<br></button><br>
  );<br>
}</p>

反应本机

传统建筑：

1. jsx 被转换为 react.createelement() 调用（类似于 react js）。
2. react native 创建原生组件的实例，而不是 dom 节点。
3. 影子树已更新以进行布局计算。
4. 原生 ui 组件通过特定于平台的 api 进行更新。

新架构（结构）：

1. jsx 仍然被转换为 react.createelement() 调用。
2. 渲染现在用 c++ 完成，允许更多同步操作。
3. 阴影树和布局计算与原生渲染更加紧密地结合。
4. 可以更有效地应用更新，可能在单个框架中。

<p>// react native component (works with both architectures)<br>
import { touchableopacity, text } from 'react-native';</p>

<p>function nativebutton({ onpress, title }) {<br>
  return (<br><touchableopacity onpress="{onpress}"><br><text>{title}</text><br></touchableopacity><br>
  );<br>
}</p>

性能影响

反应js

• 优点：
  1. 虚拟 dom 最大限度地减少实际 dom 操作，从而提高性能。
  2. 批量更新减少了回流和重绘操作。
• 挑战：
  1. 大型 dom 仍然会导致性能问题。
  2. 复杂的协调在计算上可能会很昂贵。

反应本机

传统建筑：

• 优点：
  1. 直接映射到本机组件可提供接近本机的性能。
  2. c++ 中的影子树可实现高效的布局计算。
• 挑战：
  1. 桥梁通信可能成为复杂交互的瓶颈。
  2. 大型列表或复杂的动画可能需要额外的优化。

新架构：

• 优点：
  1. fabric 允许更多同步操作，减少与桥相关的瓶颈。
  2. turbomodules 提供延迟加载和更高效的本机模块交互。
  3. 改进的类型安全性和更好的性能优化的潜力。
• 挑战：
  1. 从旧架构迁移可能需要为现有应用程序付出巨大的努力。
  2. 开发人员需要学习新概念并可能更新他们的编码实践。

开发人员经验和工具

反应js

• 熟悉的 web 开发范例和工具。
• 丰富的网络特定库和框架生态系统。
• 用于调试和性能分析的浏览器开发工具。

反应本机

传统建筑：

• 需要了解移动开发概念。
• 特定于平台的 api 和组件需要单独处理。
• 自定义工具，例如 react native 调试器和特定于平台的分析器。

新架构：

• 引入了开发人员需要理解的新概念，例如 fabric 和 turbomodules。
• 使用 codegen 改进了类型安全性，以获得更好的开发人员体验。
• 增强的调试功能，特别是对于本机模块交互。

代码可重用性和跨平台开发

共享概念

react js 和 react native 共享核心概念：

• 基于组件的架构
• 单向数据流
• ui 的虚拟表示

分歧

1. ui 组件：

   • react js 使用 html 元素和 css 进行样式设置。
   • react native 使用特定于平台的组件和 css 属性的子集。

2. 事件处理:

   • react js：dom 事件（例如 onclick、onchange）
   • react native：触摸事件（例如 onpress）和自定义 api

3. 布局：

   • react js：flexbox、css 网格和传统 css 布局
   • react native：主要是 flexbox，有一些限制

4. 本机功能：

   • react js：仅限于 web api 和浏览器功能。
   • react native：访问特定于平台的 api，并通过新架构中的 turbomodules 进行增强。

布局发散的示例：

<p>// React JS<br></p><div style="{{" display: justifycontent:>
<br><span>Centered Content</span><br>
</div>

<p>// React Native (both architectures)<br>
import { View, Text } from 'react-native';</p>

<p><view style="{{" flex: justifycontent: alignitems:><br><text>Centered Content</text><br></view></p>

对应用程序架构的影响

反应js

• 可以利用现有的 web api 和浏览器功能。
• seo 考虑因素可能会影响组件结构。
• 逐步增强和可访问性是关键问题。

反应本机

传统建筑：

• 必须考虑平台特定的功能和限制。
• 性能优化通常涉及本机模块或特定于平台的代码。
• 跨平台的 ui 一致性需要仔细的组件设计。

新架构：

• 允许更有效的桥梁通信，有可能简化复杂的交互。
• turbomodules 可以更精细地控制本机模块加载和执行。
• fabric 的同步布局功能可能会影响组件设计和动画策略。

结论

react js 和 react native 之间的架构差异反映了它们不同的目标环境。 react js 操作 web 浏览器的 dom，而 react native 则与移动平台上的本机组件交互。 react native 采用 fabric 和 turbomodules 的新架构代表了一次重大演变，解决了性能瓶颈并增强了开发人员体验。

了解这些差异对于跨平台工作或在 web 和本机移动开发之间做出决定的开发人员至关重要。每种方法都有独特的优势和挑战，它们之间的选择应基于项目要求、性能需求和目标受众。

随着这两种技术的不断发展，我们可以期待进一步的优化以及开发模式的潜在更多融合，从而更轻松地使用 react 技术构建真正的跨平台应用程序。