本文是「ArkTS 进阶之道」系列第 30 篇续「ArkUI 状态联动」深水区。上篇讲环境变量状态边界Environment 设备环境查询只读不可写单向链。本文讲精准观测边界Track class 属性级精准观测——根因在只刷关联 UI 避免冗余刷新。能力系列篇 30 讲过 Track 怎么用本文讲为哈 Track 精准观测合法只刷关联 UI 不整体刷新——根因在属性级观测槽。一、开篇Track 不是整体刷新是 class 属性级精准观测你写 React 时精准观测是「依赖数组魔法」useEffect 依赖数组控制触发范围// React 精准观测useEffect 依赖数组魔法functionuseTrackExample(){const[str1,setStr1]useState(str1-init)const[str2,setStr2]useState(str2-init)// ✅ 依赖数组 [str1]只 str1 变才触发useEffect((){console.log(str1 changed)},[str1])// ✅ 依赖数组 [str2]只 str2 变才触发useEffect((){console.log(str2 changed)},[str2])// ⚠ 依赖数组 [str1, str2]任一变都触发冗余触发}// React 精准观测useEffect 依赖数组魔法只刷关联副作用你写鸿蒙 ArkTS 时Trackclass 属性级精准观测——只刷关联 UI 避免冗余刷新// ArkTS Track class 属性级精准观测ObservedclassTrackClass{Trackstr1:stringstr1-init// ✅ Track 装饰变化时只刷 str1 关联 UITrackstr2:stringstr2-init// ✅ Track 装饰变化时只刷 str2 关联 UI}EntryComponentstruct Index{StatetrackObj:TrackClassnewTrackClass()build(){Column(){Text(${this.trackObj.str1})// ✅ str1 变只刷这一行Text(${this.trackObj.str2})// ✅ str2 变只刷这一行Button(改 str1).onClick((){this.trackObj.str1changed})}}}// Track class 属性级精准观测只刷关联 UI避免冗余刷新useEffect 依赖数组魔法 vs 属性级精准观测的区别React 把精准观测当 useEffect 依赖数组魔法依赖数组控制触发范围ArkTS 把 Track 当「属性级精准观测」Track 装饰属性变化只刷关联 UI。根因不是 useEffect 依赖数组魔法是属性级精准观测——Track class 属性级精准观测只刷关联 UI避免冗余刷新。二、根因Track 的属性级精准观测机制鸿蒙 ArkUI 的 Track 是属性级精准观测绑定——Track 装饰属性变化只刷关联 UI来自三重绑定机制。机制 1Track class 属性级观测——不是整体刷新Track 荬饰器class 属性级观测——Track 装饰的属性变化只触发该属性关联的 UI 更新// ✅ Observed Trackclass 属性级精准观测ObservedclassTrackClass{Trackstr1:stringstr1-init// ✅ Track 装饰变化时只刷 str1 关联 UITrackstr2:stringstr2-init// ✅ Track 装饰变化时只刷 str2 关联 UI}// ⚠ 对比类不用 TrackV1 默认行为整体刷新ObservedclassNoTrackClass{str1:stringstr1-init// ⚠ 未装饰 Track变化时触发整个 class 关联 UI 刷新str2:stringstr2-init// ⚠ 未装饰 Track}Track 装饰属性 vs 未装饰属性的区别Track 装饰属性str1变化只刷 str1 关联 UI未装饰属性str1变化触发整个 class 关联 UI 都刷冗余刷新。根因不是整体刷新是属性级观测——Track class 属性级观测只刷关联 UI避免冗余刷新。机制 2Track 只刷关联 UI——避免冗余刷新Track 荬饰器只刷关联 UI——Track 装饰属性变化只刷该属性关联的 UI其他 UI 不刷// ✅ Track 只刷关联 UI避免冗余刷新EntryComponentstruct Index{StatetrackObj:TrackClassnewTrackClass()build(){Column(){// ✅ str1 变只刷这一行str2 行不刷Text(str1 ${this.trackObj.str1})// ✅ str2 变只刷这一行str1 行不刷Text(str2 ${this.trackObj.str2})Button(改 str1).onClick((){this.trackObj.str1str1-changed// ✅ 只刷 str1 行str2 行不刷})}}}// Track 只刷关联 UIstr1 变只刷 str1 行str2 行不刷避免冗余刷新Track 只刷关联 UI vs 不用 Track 整体刷新的区别Track 只刷关联 UIstr1 变只刷 str1 行str2 行不刷不用 Track 整体刷新str1 变整个 class 关联 UI 都刷str2 行也刷冗余。根因不是整体刷新是属性级观测——Track 只刷关联 UI避免冗余刷新。机制 3Track 限制条件——非 Track 属性不能在 UI 中使用Track 荬饰器限制条件——如果 class 类中使用了 Track 装饰器则未被 Track 装饰的属性不能在 UI 中使用// ⚠ Track 限制条件非 Track 属性不能在 UI 中使用ObservedclassTrackClass{Trackstr1:stringstr1-init// ✅ Track 装饰str2:stringstr2-init// ⚠ 未装饰 Track不能在 UI 中使用}EntryComponentstruct Index{StatetrackObj:TrackClassnewTrackClass()build(){Column(){// ✅ str1 被 Track 装饰可以在 UI 中使用Text(str1 ${this.trackObj.str1})// ⚠ str2 未被 Track 装饰在 UI 中使用会运行时报错// Text(str2 ${this.trackObj.str2}) // ❌ 运行时报错}}}// Track 限制条件class 中用了 Track非 Track 属性不能在 UI 中使用运行时报错Track 限制条件 vs 未装饰属性可用的区别Track 限制条件class 中用了 Track非 Track 属性不能在 UI 中使用运行时报错未装饰属性可用class 中没用 Track所有属性都能在 UI 中使用。根因不是未装饰属性可用是 Track 限制条件——Track 限制条件非 Track 属性不能在 UI 中使用运行时报错。三、真机配图Track 精准观测边界——只刷关联 UI真机配图展示 Track class 属性级精准观测只刷关联 UITrack 精准观测区只刷关联 UItrackObj.str1 str1-init / trackObj.str2 str2-init改 str1 只刷 str1 行str2 行不刷不用 Track 对比区整体冗余刷新noTrackObj.str1 str1-init / noTrackObj.str2 str2-init改 str1 整个 class 关联 UI 都刷验证按钮区改 trackObj.str1 “str1-changed”Track 只刷 str1 行str2 行不刷/ 改 noTrackObj.str1 “str1-changed”不用 Track整个 class 关联 UI 都刷四、真解法Track 精准观测的三个场景场景 1Track 避免冗余刷新90% 场景首选class 属性级精准观测Track 避免冗余刷新用 Observed Track 装饰 class 属性// ✅ 场景 1Track 避免冗余刷新class 属性级精准观测ObservedclassLogModel{Tracklevel:stringINFO// ✅ Track 装饰变化时只刷 level 关联 UITrackmessage:stringinit// ✅ Track 装饰变化时只刷 message 关联 UITracktimestamp:number0// ✅ Track 装饰变化时只刷 timestamp 关联 UI}EntryComponentstruct Index{Statelog:LogModelnewLogModel()build(){Column(){Text(level ${this.log.level})// ✅ level 变只刷这一行Text(message ${this.log.message})// ✅ message 变只刷这一行Text(timestamp ${this.log.timestamp})// ✅ timestamp 变只刷这一行Button(改 level).onClick((){this.log.levelERROR})}}}// Track 避免冗余刷新level 变只刷 level 行message/timestamp 行不刷避免冗余刷新场景 2Track 与 Observed 配合必须 Observed 装饰 classTrack 与 Observed 配合——Track 必须在 Observed 装饰的 class 中使用// ✅ 场景 2Track 与 Observed 配合必须 Observed 装饰 classObserved// ✅ Observed 装饰 classclassUserModel{Trackname:stringHarmonyOS// ✅ Track 装饰属性Trackage:number18// ✅ Track 装饰属性}EntryComponentstruct Index{Stateuser:UserModelnewUserModel()build(){Column(){Text(name ${this.user.name})// ✅ name 变只刷这一行Text(age ${this.user.age})// ✅ age 变只刷这一行Button(age 1).onClick((){this.user.age})}}}// Track 与 Observed 配合Track 必须在 Observed 装饰的 class 中使用Track 与 Observed 配合 vs 单独使用 Track 的区别Track 与 Observed 配合Track 必须在 Observed 装饰的 class 中使用单独使用 TrackTrack 不在 Observed 装饰的 class 中不生效。根因不是单独使用 Track 是 Track 与 Observed 配合——Track 与 Observed 配合必须 Observed 装饰 class否则 Track 不生效。场景 3Track vs Trace 边界V1 属性级观测 vs V2 属性级观测Track vs Trace 边界——Track 是 V1 属性级观测装饰器API 11Trace 是 V2 属性级观测装饰器API 12// ✅ 场景 3Track vs Trace 边界V1 属性级观测 vs V2 属性级观测// ✅ V1Track ObservedAPI 11ObservedclassV1Model{Trackname:stringV1// ✅ Track 装饰属性V1 属性级观测}// ✅ V2Trace ObservedV2API 12ObservedV2classV2Model{Tracename:stringV2// ✅ Trace 装饰属性V2 属性级观测}// ✅ 边界// Track 是 V1 装饰器API 11配合 ObservedTrack 装饰属性变化只刷关联 UI// Trace 是 V2 装饰器API 12配合 ObservedV2Trace 装饰属性变化只刷关联 UI// V1 用 TrackV2 用 Trace不能混用Track 不在 ObservedV2 中用Trace 不在 Observed 中用Track vs Trace 边界的区别Track 是 V1 属性级观测装饰器API 11配合 ObservedTrace 是 V2 属性级观测装饰器API 12配合 ObservedV2。根因不是 V1 属性级观测是 Track vs Trace 边界——Track 是 V1 装饰器配合 ObservedTrace 是 V2 装饰器配合 ObservedV2不能混用。五、一句话哲学写鸿蒙 ArkUI 记住Track 不是整体刷新是 class 属性级精准观测——Track 荬饰器 class 属性级观测只刷关联 UI避免冗余刷新。根因不是整体刷新是属性级观测——Track class 属性级观测Track 装饰属性变化只刷关联 UI Track 只刷关联 UIstr1 变只刷 str1 行str2 行不刷避免冗余刷新 Track 限制条件class 中用了 Track非 Track 属性不能在 UI 中使用运行时报错 Track 与 Observed 配合必须 Observed 装饰 class Track vs Trace 边界V1 用 Track 配合 ObservedV2 用 Trace 配合 ObservedV2不能混用。Track 避免冗余刷新用属性级精准观测首选90% 场景Track 与 Observed 配合必须 Observed 装饰 classTrack vs Trace 边界选对装饰器V1 用 TrackV2 用 Trace不能混用。class 属性级精准观测只刷关联 UI 避免冗余刷新是 ArkUI 状态联动深水区核心