ArkTS学习笔记_UI界面的状态管理简述

ArkTS学习笔记_UI界面的状态管理简述

  • 背景:
    我们在UI开发中,绝大多数的UI界面都是动态的、有用户交互的,为了实现动态交互,引入了一个概念"状态",它主要是用来记录管理UI界面的状态变化(数据变化)。
  • 作用:
    在UI开发中,UI是应用程序运行的结果,开发者构建的UI界面,在应用程序运行时,状态是UI的参数。当参数改变时,UI作为结果,也将进行对应的改变。运行时的所有状态的变化,都会让UI进行重新渲染,在ArkUI中统称为状态管理机制。

一、UI与状态的映射关系

  • View(UI): UI渲染,指将build方法内的UI描述和@Builder装饰的方法内的UI描述映射到界面。
  • State: 状态,指驱动UI更新的数据。用户通过触发组件的事件方法,改变状态数据。状态数据的改变,引起UI的重新渲染。

二、自定义组件中的变量

  • 状态变量: 被状态装饰器装饰的变量,状态变量值的改变会引起UI的渲染更新。
  • 常规变量: 没有被状态装饰器装饰的变量,通常应用于辅助计算。它的改变永远不会引起UI的刷新。
javascript 复制代码
@Component
struct MyComponent {
  @State count: number = 0; // 状态变量
  private increaseBy: number = 1; // 常规变量

  build() {
  }
}

三、状态变量的初始化

  • 数据源/同步源: 状态变量的原始来源,可以同步给不同的状态数据。通常意义为父组件传给子组件的数据。
  • 命名参数机制: 父组件通过指定参数传递给子组件的状态变量,为父子传递同步参数的主要手段。
  • 从父组件初始化: 父组件使用命名参数机制,将指定参数传递给子组件。子组件初始化的默认值在有父组件传值的情况下,会被覆盖。
  • 初始化子节点: 父组件中状态变量可以传递给子组件,初始化子组件对应的状态变量。
  • 本地初始化: 在变量声明的时候赋值,作为变量的默认值。
相关推荐
01100001乄夵1 天前
FPGA零基础入门教程——揭开可编程芯片的神秘面纱
经验分享·笔记·学习方法·fpga入门·fpga学习之路
草莓熊Lotso1 天前
C++ 抽象类与多态原理深度解析:从纯虚函数到虚表机制(附高频面试题)
java·运维·服务器·开发语言·c++·人工智能·笔记
Rock_yzh1 天前
LeetCode算法刷题——49. 字母异位词分组
数据结构·c++·学习·算法·leetcode·职场和发展·哈希算法
Wayfreem1 天前
Spring AI Alibaba 学习之最简单的快速入门
人工智能·学习·spring
再玩一会儿看代码1 天前
Ken的Java学习之路——Java中关于面向对象
java·开发语言·经验分享·python·学习
Pluchon1 天前
硅基计划6.0 伍 JavaEE 网络原理
网络·网络协议·学习·tcp/ip·udp·java-ee·信息与通信
paopao_wu1 天前
DeepSeek-OCR实战(03):本地部署+简单UI测试
ui·ocr
时光不去1 天前
java接口自动化之allure本地生成报告
运维·笔记·自动化
杨浦老苏1 天前
简单直观的笔记管理器Poznote
笔记·docker·群晖
椰壳也可1 天前
06_作业基于CubeMx实现按键控制LED灯(裸机)(立芯嵌入式笔记)
笔记·stm32·学习