介绍
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
优点：虚拟 dom 最大限度地减少实际 dom 操作，从而提高性能。批量更新减少了回流和重绘操作。挑战：大型 dom 仍然会导致性能问题。复杂的协调在计算上可能会很昂贵。
反应本机
传统建筑：
优点：直接映射到本机组件可提供接近本机的性能。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 技术构建真正的跨平台应用程序。
以上就是React JS DOM 与 React Native 组件树：全面的技术比较的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1492011.html
微信扫一扫 
支付宝扫一扫 
