HarmonyOS 和 React 对比-Day22

发布时间:2026/10/9 19:35:51

HarmonyOS 和 React 对比-Day22 适用人群有 React/Vue/TS 基础的前端开发者核心策略用前端知识做类比只记差异点和考试陷阱第 1 部分概念快速映射5 分钟把鸿蒙概念映射到你熟悉的前端概念上大幅降低记忆成本鸿蒙前端类比一句话说明ArkTSTypeScript 装饰器语法糖就是 TS多了State/Prop等装饰器ArkUI声明式 UI类似 React/Vue3用函数/组件描述 UI状态驱动视图Entryexport default/ 页面入口一个页面只能有一个标记页面入口Componentfunction Component()/ 自定义组件普通组件装饰器没有页面生命周期StateuseState组件内部状态必须给初始值Propprops单向数据流父传子子组件只读Linkv-model/ 双向绑定父子双向同步Provide/ConsumeReact Context / Provide/Inject跨层级共享数据不用逐层传Builder抽离 UI 函数 / Render Prop复用 UI 结构不是组件UIAbility类似 Android Activity / 小程序 Page应用的基本组成单元管理生命周期routerreact-router/vue-router页面跳转有pushUrl和replaceUrlHAP.apk/ 小程序包鸿蒙应用打包单元DevEco StudioVS Code 专属插件IDE有预览器、模拟器、真机调试第 2 部分高频考点速记15 分钟一、判断题 · 生死线记牢这些陷阱题目表述答案前端类比 / 记忆口诀Component组件支持onPageShow/onBackPress❌错只有Entry页面才有页面生命周期普通组件没有Entry页面可以有多个❌错一个页面只能一个Entry就像export default只能有一个State变量可以不给初始值❌错相当于useState()不给初始值必须给首选项 Preferences 的 Key 可以重复❌错Key 唯一最大长度80 字节router.pushUrl()页面栈最大 32 层✅对记住数字32使用 http 请求必须订阅headersReceive才成功❌错不是必须的正常发请求就行Web 组件对所有网页都可以用zoom()❌错有限制不是全部预览器可以预览网络、数据库、传感器❌错这些必须用模拟器或真机预览器只能看 UI应用由一个或多个 HAP 组成✅对HAP 是基本单元每一个自定义组件都有自己的生命周期✅对组件级生命周期独立存在本地模拟器可以在虚拟机内运行节省资源❌错需要一定硬件资源二、单选题 · 送分题秒选考点答案前端记忆法页面入口装饰器Entryexport default自定义组件装饰器Componentfunction Component()自定义弹窗装饰器CustomDialog弹窗专用路由模块导入import router from ohos.router类似import { useRouter }跳转并销毁当前页router.replaceUrl()router.replace()跳转并保留当前页压栈router.pushUrl()router.push()最大 32 层页面路径配置文件main_pages.jsonroutes.ts模块配置文件module.json5模块级配置应用全局配置文件app.json5package.json胶囊型按钮ButtonType.Capsule样式枚举网络图片权限ohos.permission.INTERNET类似android.permission.INTERNET首选项 Key 最大长度80 字节死记不能包含子组件的组件LoadingProgress纯展示组件类似img不能嵌套List 滑动偏移量事件onScroll滚动监听Video 播放网络视频权限ohos.permission.INTERNET同网络请求Video 获取视频时长的事件onPrepared不是onStartbundleName作用标识应用唯一性package.nameUIAbility 默认启动模式standard不是 singleton单例是另外配的发起网络请求导入模块import http from ohos.net.http标准库提交表单数据请求方式RequestMethod.POST常规常量命名规范全大写下划线MAX_COUNT类名命名规范大驼峰MyClass变量命名规范小驼峰myVariable三、多选题 · 重灾区最容易丢分考点正确答案避坑指南可滚动的容器组件Scroll、List、Grid❌Row、Column默认不可滚动这是最大陷阱UIAbility 生命周期onCreate、onDestroy、onForeground、onBackground❌不含onPageShow/onPageHide那是页面生命周期页面生命周期Entry组件onPageShow、onPageHide、onBackPress和 UIAbility 生命周期分开记module.json5 包含的信息Ability 配置、设备类型、权限列表❌不含应用包名和版本号在app.json5ArkTS 声明式开发基本组成装饰器、自定义组件、UI 描述、内置组件、属性方法、事件方法✅全选送分题正确的组件层次Text Span、Button Column Image❌Image不能包含子组件ForEach 参数数组、lambda 生成子组件、唯一键值生成函数类似array.map((item, index) ...)文本组件属性fontColor、fontSize、fontStyle、fontWeight、fontFamily✅全选Tabs 与 TabContentTabContent 宽 Tabs 的 barWidth、tabBar 支持Builder、一个 TabsController 不能控制多个 Tabs注意细节描述响应式布局断点xs、sm、md、lg、xl、xxl✅全选6 个都要记Promise 特点支持链式调用、状态一旦完成不可变❌不支持同步操作、不能暂停代码自动生成快速重写父类、生成构造器、生成 getter、生成 setter✅全选数据管理方式分布式键值数据库、分布式数据对象、用户首选项、关系型数据库✅全选自由流转体验媒体播控、应用接续、跨设备拖拽、跨设备剪贴板、服务互通✅全选第 3 部分配置文件与生命周期5 分钟三个核心配置文件// 1. app.json5 —— 应用全局配置 package.json{app:{bundleName:com.example.myapp,// 唯一标识类似 package.nameversionCode:1,versionName:1.0.0}}// 2. module.json5 —— 模块配置 vite.config / 模块级配置{module:{name:entry,type:entry,abilities:[...],// Ability 列表deviceTypes:[...],// 支持的设备类型requestPermissions:[...]// 权限申请列表}}// 3. main_pages.json —— 页面路由配置 routes.ts{src:[pages/Index,pages/Detail]}生命周期对比考试必考UIAbility 生命周期应用级 页面生命周期Entry 组件级 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ onCreate() ← 实例创建 onPageShow() ← 页面显示 onDestroy() ← 实例销毁 onPageHide() ← 页面隐藏 onForeground() ← 进入前台 onBackPress() ← 返回键 onBackground() ← 进入后台核心区别UIAbility 是应用进程级页面生命周期是页面级。多选题经常混着考必须分开记。启动模式模式说明类比standard每次启动新建实例默认 普通页面跳转singleton单实例已存在就复用 单例模式specified按指定 Key 匹配实例 带 ID 的页面复用第 4 部分前端开发者易错点5 分钟1. 布局思维转换前端display: flexflex-direction鸿蒙直接Row()横向 Flex或Column()纵向 Flex没有display属性Row/Column默认不可滚动需要滚动必须包一层Scroll或用List2. 状态管理差异// 前端 Reactconst[count,setCount]useState(0);// 鸿蒙 ArkTSStatecount:number0;// 必须给初始值必须声明类型// 直接 this.count 即可不需要 setState3. 路由跳转差异// 前端router.push(/detail)// 鸿蒙router.pushUrl({url:pages/Detail});// 压栈保留当前页router.replaceUrl({url:pages/Detail});// 替换销毁当前页router.back();// 返回4. 网络请求importhttpfromohos.net.http;// 模块名是 ohos.net.http不是 axios// 必须先在 module.json5 申请 ohos.permission.INTERNET 权限5. 子组件限制Image、LoadingProgress、Text不含 Span 时不能包含子组件类似前端的img、input不能嵌套子元素第 5 部分考前 2 分钟 · 口诀速记生命周期口诀“Ability 四兄弟Create、Destroy、Foreground、Background页面三剑客Show、Hide、BackPress。”多选题防坑口诀“滚动只有Scroll/List/GridRow/Column不滚动module.json5管模块app.json5管全局Component没页面命Entry才有onPageShow。”判断题防坑口诀“Key 唯一 80 字节32 层栈要牢记预览器不看网络库模拟器真机才靠谱replaceUrl销毁页pushUrl压栈留后路。”
延伸阅读

更多相关文章

2026/10/9 19:35:17

DeepSeek API峰谷定价实战:四步优化策略降低调用成本

1. 先搞清楚“峰谷定价”到底影响谁,以及怎么算账 今天 DeepSeek API 的峰谷定价方案正式生效了。简单说,就是 高峰时段调用 API 的价格会翻倍 。如果你正在用或者打算用 DeepSeek 的 API 做开发,这个变化直接关系到你的调用成本和预算规划…

2026/10/8 6:52:31

特斯拉暂停Model S/X定制订单背后的车企生产与供应链管理逻辑

1. 从一则市场传闻说起:订单调整背后的商业逻辑 最近,关于特斯拉暂停接受中国消费者定制化Model S和Model X新订单的消息,在汽车圈和科技圈引发了不小的讨论。作为一位长期关注新能源汽车行业动态的从业者,我第一时间就注意到了这…

2026/10/9 19:33:44

古诗词MySQL数据库:5.5万唐诗+2.1万宋词开箱即用

简介:这是一套面向古诗词研究者、中文教育工作者及传统文化爱好者的结构化数据库资源,专为高效检索、批量分析与教学应用设计。资源以MySQL可导入的SQL文件形式提供,完整收录约5.5万首唐诗与2.1万余首宋词,涵盖李白、杜甫、苏轼、…

2026/10/9 19:33:44

t3code编码规范体系:从设计到落地的工程实践指南

1. 从“t3code”这个名字说起:它到底是什么第一次看到“t3code”这个词,很多人会下意识地把它当成某个开源库、某个命令行工具,或者某个内部代号。我最初接触它的时候也是这个反应,翻了半天资料才发现,它并不是一个现成…

2026/10/9 19:33:44

pstack-claude:用Linux原生栈分析诊断本地Claude服务进程卡死

1. 项目概述:pstack-claude 是什么,它解决的是哪类真实痛点?“pstack-claude”这个名称乍看像一个拼接词,但拆解后立刻能抓住两个关键锚点:pstack和claude。前者是 Linux 系统中一个极其轻量却极为实用的诊断工具&…

2026/10/9 19:33:44

Django进销存系统实战:五张表联动、库存事务与迁移踩坑全解

简介:基于Django构建的商品销售进销存系统源码包,面向正在完成Python课程设计、期末大作业,或希望掌握Django项目完整搭建流程的开发者,覆盖商品入库、销售管理、库存盘点等典型业务逻辑。压缩包共2000个文件,整体大小…

2026/10/9 19:28:43

H5+Canvas连线题实战:坐标、命中检测与重绘全解析

简介:这份资源面向前端初学者与需要实现互动题型的开发者,提供一套基于HTML5 Canvas与JavaScript的连线题完整实现方案,可用于在线教育、认知测试或轻量游戏场景。压缩包共4个文件,包含1个HTML页面、1个JavaScript脚本和2个CSS样式…

2026/10/8 10:03:18

Jev+Agent接管浏览器:browser-use实战与jev-ultrafast性能优化

1. 从“Jev”说起:为什么我要把Agent接进浏览器“Jev”这个词最近在圈子里出现的频率越来越高,很多人第一次听到会以为是某个新模型的名字,其实它更像是一种思路——把Jev模型的能力当作底座,通过Agent的方式去接管浏览器&#xf…

2026/10/8 10:03:20

多智能体集群实战:DeepAgents编排、MCP与A2A协议及Skills体系

1. 从"单兵作战"到"集群协同":多智能体编排到底在解决什么问题如果你最近在折腾 Agent 相关的东西,大概率会有一种感觉:单个 Agent 能做的事情,其实很快就摸到天花板了。你给它一个提示词,挂几个工…

2026/10/8 6:05:44

无源低通滤波器设计实战:从RC到LC,手把手教你避开那些坑

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/9 0:04:27

毕业论文初稿完成后首次进行AIGC疑似度自查的摸底与分流策略

毕业论文初稿完成后首次进行AIGC疑似度自查的摸底与分流策略当数万字的学位论文初稿经历开题、实验、问卷与多轮文献梳理最终成形时,绝大多数研究生都会面临一道全新的形式审查关卡:AIGC 疑似度排查。在高校毕业审核流程中,盲审前的文本检测通…

2026/10/9 0:04:27

食堂节能改造源头工厂,商用厨房设备焕新方案广受好评

商用厨房作为餐饮经营、单位供餐的核心后勤阵地,其设备配置、动线规划与运维体系直接决定后厨作业效率、运营成本与合规性。从基础的灶具、制冷存储设备,到油烟净化、水处理等配套系统,每一个环节的合理性都与食品安全、能耗管控、消防安全挂…

还想了解更多?直接咨询顾问

免费诊断 + 免费方案 + 透明报价。

全国咨询热线400-8866-253
免费获取方案
☎咨询二维码 ☎ ↑