鸿蒙开发之状态管理@Observed和@ObjectLink

最新推荐文章于 2025-05-15 16:44:40 发布

原创最新推荐文章于 2025-05-15 16:44:40 发布 · 1.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#鸿蒙

鸿蒙开发专栏收录该内容

42 篇文章

订阅专栏

本文介绍了在React中，当对象内引用或数组中的对象属性变化时，常规状态管理工具无法自动更新UI的问题，展示了如何使用@Observed和@ObjectLink装饰器解决此问题，以确保组件间的高效数据同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、使用场景

当对象内引用对象，改变内部对象属性的时候其他状态管理如@State、@Provide、@Consume等是无法触发更新的。同样，在数组内如果有对象，改变对象的属性也是无法更新的。在这种情况下就可以采用@Observed和@ObjectLink装饰器了。

二、使用方式

在我们需要监控的对象组件使用@Observed装饰，将需要变更的地方抽取出来作为一个新的组件，新组件内部引用对象使用@ObjectLink装饰。

例如，在案例代码这个基础上，我们需要在点击任务完成的时候，修改任务列表卡片的文字颜色，并中划线。这就涉及到了修改任务数组中Task对象的属性，需要更新UI。就需要@Observed和@ObjectLink结合使用。

show code （在案例代码基础上做处理）

//需要监控的组件使用@Observed装饰
@Observed
class Task {
  static  id: number = 1
  name:string = '任务名称'+Task.id++
  finished:boolean = false
}

抽离之前任务列表的item为一个新组件

@Component
struct TaskItem {
    
//接收父组件中传递的task，使用@ObjectLink装饰
  @ObjectLink task: Task
    
 //父组件中处理数据更新的方法
  handTasks: () => void

  build() {
    Row() {
      if (this.task.finished) {
        Text(this.task.name)
          .tasksuccessed()
      } else {
        Text(this.task.name)
      }

      Checkbox()
        .select(this.task.finished)
        .onChange(value => {
          this.task.finished = value
          console.log('任务状态' + value + '')
           this.handTasks()
        })
    }
    .card()
    .justifyContent(FlexAlign.SpaceBetween)
  }
}

//父组件中的任务列表
      List({ space: 10 }) {
        ForEach(this.tasks, (task: Task, index) => {
          ListItem() {
            //将父组件的渲染交给新组件
            TaskItem({task:task,handTasks:this.handleTaskNumber.bind(this)})
          }
          .swipeAction({ end: this.deleteButton(index) })
        }, item => '' + item.name)
      }

其中，需要注意的第一点，传递父组件的方法时，传递的是this.handleTaskNumber没有()。如果传递()就表示方法调用了。

需要注意第二点，我们在将父组件方法传递给子组件的时候。如果没有bind(this)处理，默认调用的父组件方法的this就是子组件。所以，我们需要bind(this)永远使用父组件来调用父组件的方法。