介绍
reac++t js 和 react native 虽然共享核心原则，但在渲染和管理 ui 元素的方法上存在显着差异。本文对 react js 中使用的文档对象模型 (dom) 和 react native 使用的组件树结构进行了深入的技术比较，包括 react native 的新架构。
架构概览
react js 和 dom
react js 在 web 浏览器中运行，操作文档对象模型 (dom) 来渲染和更新用户界面。
主要特征：
- 虚拟 dom：react js 使用虚拟 dom 作为抽象层。
- 协调：在虚拟 dom 和实际 dom 之间协调更改。
- html 元素：ui 组件最终呈现为标准 html 元素。
react native 和组件树
react native 专为移动平台设计，不与 dom 交互。相反，它管理特定于移动操作系统（ios 或 android）的本机组件树。
主要特征：
- 原生组件：ui 元素映射到特定于平台的原生组件。
- 桥接器：javascript 核心通过桥接器与本机模块进行通信。
- 影子树：用 c++ 维护组件的影子树，用于布局计算。
react native 的新架构
react native 正在过渡到新的架构，该架构显着改变了它处理渲染和本机交互的方式：
- fabric：一种新的渲染系统，可提高 ui 响应能力并允许更多并发操作。
- turbomodules：增强的本机模块系统，提供类型安全接口和延迟加载功能。
渲染过程
反应js
- jsx 被转换为 react.createelement() 调用。
- 虚拟 dom 根据状态或 prop 更改进行更新。
- 协调算法将虚拟 dom 与实际 dom 进行比较。
- 必要的更新会批量并应用到真实的 dom。
// react js component
function webbutton({ onpress, title }) {
return (
);
}
反应本机
传统建筑：
- jsx 被转换为 react.createelement() 调用（类似于 react js）。
- react native 创建原生组件的实例，而不是 dom 节点。
- 影子树已更新以进行布局计算。
- 原生 ui 组件通过特定于平台的 api 进行更新。
新架构（结构）：
- jsx 仍然被转换为 react.createelement() 调用。
- 渲染现在用 c++ 完成，允许更多同步操作。
- 阴影树和布局计算与原生渲染更加紧密地结合。
- 可以更有效地应用更新，可能在单个框架中。
// react native component (works with both architectures)
import { touchableopacity, text } from 'react-native';function nativebutton({ onpress, title }) {
return (
{title}
);
}
性能影响
反应js
反应本机
传统建筑：
- 优点：
- 直接映射到本机组件可提供接近本机的性能。
- c++ 中的影子树可实现高效的布局计算。
- 挑战：
- 桥梁通信可能成为复杂交互的瓶颈。
- 大型列表或复杂的动画可能需要额外的优化。
新架构：
- 优点：
- fabric 允许更多同步操作，减少与桥相关的瓶颈。
- turbomodules 提供延迟加载和更高效的本机模块交互。
- 改进的类型安全性和更好的性能优化的潜力。
- 挑战：
- 从旧架构迁移可能需要为现有应用程序付出巨大的努力。
- 开发人员需要学习新概念并可能更新他们的编码实践。
开发人员经验和工具
反应js
- 熟悉的 web 开发范例和工具。
- 丰富的网络特定库和框架生态系统。
- 用于调试和性能分析的浏览器开发工具。
反应本机
传统建筑：
- 需要了解移动开发概念。
- 特定于平台的 api 和组件需要单独处理。
- 自定义工具，例如 react native 调试器和特定于平台的分析器。
新架构：
- 引入了开发人员需要理解的新概念，例如 fabric 和 turbomodules。
- 使用 codegen 改进了类型安全性，以获得更好的开发人员体验。
- 增强的调试功能，特别是对于本机模块交互。
代码可重用性和跨平台开发
共享概念
react js 和 react native 共享核心概念：
- 基于组件的架构
- 单向数据流
- ui 的虚拟表示
分歧
-
ui 组件：
- react js 使用 html 元素和 css 进行样式设置。
- react native 使用特定于平台的组件和 css 属性的子集。
-
事件处理:
- react js：dom 事件（例如 onclick、onchange）
- react native：触摸事件（例如 onpress）和自定义 api
-
布局：
- react js：flexbox、css 网格和传统 css 布局
- react native：主要是 flexbox，有一些限制
-
本机功能：
- react js：仅限于 web api 和浏览器功能。
- react native：访问特定于平台的 api，并通过新架构中的 turbomodules 进行增强。
布局发散的示例：
// React JS
Centered Content
// React Native (both architectures)
import { View, Text } from 'react-native';
Centered Content
对应用程序架构的影响
反应js
- 可以利用现有的 web api 和浏览器功能。
- seo 考虑因素可能会影响组件结构。
- 逐步增强和可访问性是关键问题。
反应本机
传统建筑：
- 必须考虑平台特定的功能和限制。
- 性能优化通常涉及本机模块或特定于平台的代码。
- 跨平台的 ui 一致性需要仔细的组件设计。
新架构：
- 允许更有效的桥梁通信，有可能简化复杂的交互。
- turbomodules 可以更精细地控制本机模块加载和执行。
- fabric 的同步布局功能可能会影响组件设计和动画策略。
结论
react js 和 react native 之间的架构差异反映了它们不同的目标环境。 react js 操作 web 浏览器的 dom，而 react native 则与移动平台上的本机组件交互。 react native 采用 fabric 和 turbomodules 的新架构代表了一次重大演变，解决了性能瓶颈并增强了开发人员体验。
了解这些差异对于跨平台工作或在 web 和本机移动开发之间做出决定的开发人员至关重要。每种方法都有独特的优势和挑战，它们之间的选择应基于项目要求、性能需求和目标受众。
随着这两种技术的不断发展，我们可以期待进一步的优化以及开发模式的潜在更多融合，从而更轻松地使用 react 技术构建真正的跨平台应用程序。
