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压栈留后路。”