@Link装饰的变量和其所述的自定义组件共享生命周期。原创

小崽崽1

发布于 2025-3-28 13:41

浏览

0收藏

为了了解@Link变量初始化和更新机制，有必要先了解父组件和拥有@Link变量的子组件的关系，初始渲染和双向更新的流程（以父组件为@State为例）。

1. 初始渲染：执行父组件的build()函数后将创建子组件的新实例。初始化过程如下：

1. 必须指定父组件中的@State变量，用于初始化子组件的@Link变量。子组件的@Link变量值与其父组件的数据源变量保持同步（双向数据同步）。
2. 父组件的@State状态变量包装类通过构造函数传给子组件，子组件的@Link包装类拿到父组件的@State的状态变量后，将当前@Link包装类this指针注册给父组件的@State变量。
1.
2.

2. @Link的数据源的更新：即父组件中状态变量更新，引起相关子组件的@Link的更新。处理步骤：

1. 通过初始渲染的步骤可知，子组件@Link包装类把当前this指针注册给父组件。父组件@State变量变更后，会遍历更新所有依赖它的系统组件（elementid）和状态变量（比如@Link包装类）。
2. 通知@Link包装类更新后，子组件中所有依赖@Link状态变量的系统组件（elementId）都会被通知更新。以此实现父组件对子组件的状态数据同步。
1.
2.

3. @Link的更新：当子组件中@Link更新后，处理步骤如下（以父组件为@State为例）：

1. @Link更新后，调用父组件的@State包装类的set方法，将更新后的数值同步回父组件。
2. 子组件@Link和父组件@State分别遍历依赖的系统组件，进行对应的UI的更新。以此实现子组件@Link同步回父组件@State。
1.
2.

使用场景：

简单类型和类对象类型的@Link

以下示例中，点击父组件ShufflingContainer中的“Parent View: Set yellowButton”和“Parent View: Set GreenButton”，可以从父组件将变化同步给子组件，子组件GreenButton和YellowButton中@Link装饰变量的变化也会同步给其父组件。

struct GreenButton {
@Link greenButtonState: GreenButtonState; build() {
Button('Green Button')
.width(this.ggreenButtonState.width)
.height(150.0)
.backgroundColor('#00ff00')
.onClick(() => {
if (this.ggreenButtonState.width < 700) {
// 更新class的属性，变化可以被观察到同步回父组件
this.ggreenButtonState.width += 125;
} else {
// 更新class，变化可以被观察到同步回父组件
this.ggreenButtonState = new GreenButtonState(100);
}
})
}
}
@Component
struct YellowButton {
@Link yellowButtonState: number; build() {
Button('Yellow Button')
.width(this.yellowButtonState)
.height(150.0)
.backgroundColor('#ffff00')
.onClick(() => {
// 子组件的简单类型可以同步回父组件
this.yellowButtonState += 50.0;
})
}
}
@Entry @Component
struct ShufflingContainer {
@State greenButtonState: GreenButtonState = new GreenButtonState(300); @State yellowButtonProp: number = 100;
build() {
Column() {
// 简单类型从父组件@State向子组件@Link数据同步
Button('Parent View: Set yellowButton')
.onClick(() => {
this.yellowButtonProp = (this.yellowButtonProp < 700) ? this.yellowButtonProp + 100 : 100;
})
// class类型从父组件@State向子组件@Link数据同步 Button('Parent View: Set GreenButton')
.onClick(() => {
this.ggreenButtonState.width = (this.ggreenButtonState.width < 700) ? this.ggreenButtonState.width + 100 : 100;
})
// class类型初始化@Link
GreenButton({ greenButtonState: $greenButtonState })
// 简单类型初始化@Link
YellowButton({ yellowButtonState: $yellowButtonProp })
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.

数组类型的@Link

@Component struct Child {
@Link items: number[];

build() {
Column() {
Button(`Button1: push`).onClick(() => { this.items.push(this.items.length + 1);
})
Button(`Button2: replace whole item`).onClick(() => { this.items = [100, 200, 300];
})
}
}
}

@Entry @Component struct Parent {
@State arr: number[] = [1, 2, 3];

build() {
Column() {
Child({ items: $arr }) ForEach(this.arr,
item => { Text(`${item}`)
},
item => item.toString()
)
}
}
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.