第七天 开始学习ArkTS基础,理解声明式UI编程思想
学习 ArkTS 的声明式 UI 编程思想是掌握 HarmonyOS 应用开发的核心基础。以下是一份简洁高效的学习指南,帮助你快速入门:
一、ArkTS 声明式 UI 核心思想
-
数据驱动
- UI = f(state):UI 是应用状态的函数,状态变化自动触发 UI 更新。
- 单向数据流:数据从父组件流向子组件,保证可预测性。
-
组件化设计
- 通过
@Component装饰器定义可复用的 UI 组件。 - 组件具备独立的状态管理能力(通过
@State、@Prop等装饰器)。
- 通过
-
声明式语法
- 描述“是什么”而非“怎么做”:无需手动操作 DOM/控件,只需声明 UI 的最终形态。
- 组合优于继承:通过组合简单组件构建复杂界面。
二、对比:声明式 vs 命令式
示例:实现一个计数器按钮
// ArkTS 声明式写法
@Entry
@Component
struct CounterPage {@State count: number = 0 // 状态变量build() {Column() {Text(`Count: ${this.count}`).fontSize(20)Button('Click +1').onClick(() => {this.count++ // 修改状态自动触发 UI 更新})}}
}
// 传统命令式写法(伪代码)
void onCreate() {TextView textView = findViewById(R.id.text_view);Button button = findViewById(R.id.button);int count = 0;button.setOnClickListener(v -> {count++;textView.setText("Count: " + count); // 需手动更新 UI});
}
核心差异:声明式代码不关心如何更新 UI,只需定义状态与 UI 的关系。
三、关键语法特性
-
装饰器
@Entry: 标记应用入口组件@Component: 定义可复用 UI 组件@State: 组件内部状态,变化触发 UI 更新@Prop: 从父组件传递的不可变数据@Link: 与父组件双向绑定的数据
-
UI 描述语法
Column() { // 纵向布局Text('Hello').fontSize(20) // 链式调用设置样式Button('Submit').onClick(() => { /* 事件处理 */ }) } .padding(10) // 容器属性 -
条件与循环渲染
// 条件渲染 if (this.isLoading) {Loading() } else {Content() }// 循环渲染 ForEach(this.items, (item: string) => {Text(item) })
四、学习路径建议
-
官方文档精读
- 通读 ArkTS 官方指南
- 重点关注《声明式 UI 开发范式》章节
-
实战项目驱动
- 实现 TodoList 应用(练习状态管理)
- 开发天气展示界面(学习网络请求与数据绑定)
- 创建自定义组件(如可折叠卡片)
-
进阶学习
- 状态管理:
@Observed+@ObjectLink - 生命周期:
aboutToAppear/aboutToDisappear - 动画实现:属性动画、转场动画
- 状态管理:
五、常见误区
-
过度使用
@State
应遵循状态提升原则,将状态放在最近的共同祖先组件。 -
忽视组件拆分
将大组件拆分为多个小组件,提高代码可维护性。 -
直接操作 DOM
避免通过getInspectorByKey等命令式方法操作 UI。
关键理解:声明式 UI 的本质是通过抽象让开发者专注于业务逻辑与数据关系,而非具体的 UI 更新步骤。通过持续练习,你会逐渐体会到这种范式在复杂应用开发中的强大优势。
相关文章:
第七天 开始学习ArkTS基础,理解声明式UI编程思想
学习 ArkTS 的声明式 UI 编程思想是掌握 HarmonyOS 应用开发的核心基础。以下是一份简洁高效的学习指南,帮助你快速入门: 一、ArkTS 声明式 UI 核心思想 数据驱动 UI f(state):UI 是应用状态的函数,状态变化自动触发 UI 更新。单…...
windows C++ Fiber (协程)
协程,也叫微线程,多个协程在逻辑上是并发的,实际并发由用户控件。 在windows上引入了纤程(fiber)。 WinBase.h 中函数原型 #if(_WIN32_WINNT > 0x0400)// // Fiber begin //#pragma region Application Family or OneCore Family or Game…...
游戏引擎学习第89天
回顾 由于一直没有渲染器,终于决定开始动手做一个渲染器,虽然开始时并不确定该如何进行,但一旦开始做,发现这其实是正确的决定。因此,接下来可能会花一到两周的时间来编写渲染器,甚至可能更长时间…...
2025新鲜出炉--前端面试题(一)
文章目录 1. vue3有用过吗, 和vue2之间有哪些区别2. vue-router有几种路由, 分别怎么实现3. webpack和rollup这两个什么区别, 你会怎么选择4. 你能简单介绍一下webpack项目的构建流程吗5. webpack平时有手写过loader和plugin吗6. webpack这块你平时做过哪些优化吗?7…...
教程 | i.MX RT1180 ECAT_digital_io DEMO 搭建(一)
本文介绍 i.MX RT1180 EtherCAT digital io DEMO 搭建,Master 使用 TwinCAT ,由于步骤较多,分为上下两篇,本文为第一篇,主要介绍使用 TwinCAT 控制前的一些准备。 原厂 SDK 提供了 evkmimxrt1180_ecat_examples_digit…...
Pyecharts系列课程04——折线图/面积图(Line)
本章我们学习在Pyecharts中折线图(Line)的使用。折线图通用应用于数据的趋势分析。 折线图 我们现在有两组数据,x_data是2024年的月份,y_data为对应张三甲每个月的用电量。 # 家庭每月用电量趋势 x_data ["1月", &q…...
变压器-000000
最近一个项目是木田12V的充电器,要设计变压器,输出是12V,电压大于1.5A12.6*1.518.9W. 也就是可以将变压器当成初级输入的一个负载。输入端18.9W. 那么功率UI 。因为变压器的输入是线性上升的,所以电压为二份之一,也就是1/2*功率…...
凝思60重置密码
凝思系统重置密码 - 赛博狗尾草 - 博客园 问题描述 凝思系统进入单用户模式,在此模式下,用户可以访问修复错误配置的文件。也可以在此模式下安装显卡驱动,解决和已加载驱动的冲突问题。 适用范围 linx-6.0.60 linx-6.0.80 linx-6.0.100…...
linux——网络计算机{序列化及反序列化(JSON)(ifdef的用法)}
linux——网络(服务器的永久不挂——守护进程)-CSDN博客 目录 一、序列化与反序列化 1. 推荐 JSON 库 2. 使用 nlohmann/json 示例 安装方法 基础用法 输出结果 3. 常见操作 4. 其他库对比 5. 选择建议 二、ifdef宏的用法 基本语法 核心用途…...
【教程】docker升级镜像
转载请注明出处:小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你,欢迎[点赞、收藏、关注]哦~ 目录 自动升级 手动升级 无论哪种方式,最重要的是一定要通过-v参数做数据的持久化! 自动升级 使用watchtower,可…...
迅为RK3568开发板篇OpenHarmony实操HDF驱动控制LED-编写应用APP
在应用代码中我们实现如下功能: 当应用程序启动后会获取命令行参数。如果命令行没有参数,LED 灯将循环闪烁;如果命令行带有参数,则根据传输的参数控制 LED 灯的开启或关闭。通过 HdfIoServiceBind 绑定 LED灯的 HDF 服务ÿ…...
python代码
python\main_script.py from multiprocessing import Process import subprocessdef call_script(args):# 创建一个新的进程来运行script_to_call.pyprocess Process(targetrun_script, args(args[0], args[1]))process.start()process2 Process(targetrun_script, args(arg…...
React 打印插件 -- react-to-print
一、安装依赖 npm install react-to-print 二、使用 import { useReactToPrint } from "react-to-print"; import React, { useRef, forwardRef } from react;const Content () > {const contentRef useRef(null);const reactToPrintFn useReactToPrint({ c…...
探索C语言简易计算器程序的实现与优化
在C语言编程学习中,实现一个简易计算器是一个常见且有趣的练习项目。它不仅能帮助我们巩固基本的语法知识,如函数、循环、分支结构,还能让我们深入理解程序设计的逻辑。接下来,我们将分析三段实现简易计算器功能的C语言代码&#…...
深入了解 MySQL:从基础到高级特性
引言 在当今数字化时代,数据的存储和管理至关重要。MySQL 作为一款广泛使用的开源关系型数据库管理系统(RDBMS),凭借其高性能、可靠性和易用性,成为众多开发者和企业的首选。本文将详细介绍 MySQL 的基础概念、安装启…...
OSPF基础(1):工作过程、状态机、更新
OSPF基础 1、技术背景(与RIP密不可分,因为RIP中存在的问题) RIP中存在最大跳数为15的限制,不能适应大规模组网周期性发送全部路由信息,占用大量的带宽资源以路由收敛速度慢以跳数作为度量值存在路由环路可能性每隔30秒…...
工业相机如何获得更好的图像色彩
如何获得更好的图像色彩 大部分的工业自动化检测中对物体的色彩信息并不敏感,因此会使用黑白的相机,但是在显微镜成像、颜色分类识别等领域,相机的色彩还原就显得格外重要,在调节相机色彩方面的参数时,有以下几个方面需…...
使用requestAnimationFrame减少浏览器重绘
文章目录 介绍使用使用rAF前使用rAF后 介绍 在屏幕中,浏览器通常都以60FPS(1/60 s)每帧更新屏幕,但是当前端绑定了一些高频事件,如鼠标移动,屏幕滚动、触摸滑动等时,在一帧的周期内,…...
Mac 终端命令大全
—目录操作— ꔷ mkdir 创建一个目录 mkdir dirname ꔷ rmdir 删除一个目录 rmdir dirname ꔷ mvdir 移动或重命名一个目录 mvdir dir1 dir2 ꔷ cd 改变当前目录 cd dirname ꔷ pwd 显示当前目录的路径名 pwd ꔷ ls 显示当前目录的内容 ls -la ꔷ dircmp 比较两个目录的内容 di…...
如何使用deepseek开发一个翻译API
什么是deepseek Deepseek 是一个基于人工智能技术的自然语言处理平台,提供了多种语言处理能力,包括文本翻译、语义分析、情感分析等。它通过深度学习模型和大规模语料库训练,能够实现高质量的文本翻译和多语言理解。Deepseek 的核心优势在于…...
DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上,看到基于小智 AI DIY 玩具的演示,感觉有点意思,想着自己也来试试。 如果只是想烧录现成的固件,乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外,还提供了基于网页版的 ESP LA…...
HBuilderX安装(uni-app和小程序开发)
下载HBuilderX 访问官方网站:https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本: Windows版(推荐下载标准版) Windows系统安装步骤 运行安装程序: 双击下载的.exe安装文件 如果出现安全提示&…...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目(父项目)主要用于依赖管理 一些需要注意的点: 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件,否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
大模型多显卡多服务器并行计算方法与实践指南
一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...
鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/
使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题:docker pull 失败 网络不同,需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O(n) 时间复杂度…...
高防服务器能够抵御哪些网络攻击呢?
高防服务器作为一种有着高度防御能力的服务器,可以帮助网站应对分布式拒绝服务攻击,有效识别和清理一些恶意的网络流量,为用户提供安全且稳定的网络环境,那么,高防服务器一般都可以抵御哪些网络攻击呢?下面…...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具,可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板,允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板,并通…...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中,新增了一个本地验证码接口 /code,使用函数式路由(RouterFunction)和 Hutool 的 Circle…...
return this;返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请,不同级别的经理有不同的审批权限: // 抽象处理者:审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...
