《HarmonyOS应用开发基础》 课件知识点2-8-2 页面级变量的状态管理

页面级变量的状态管理页面级变量的状态管理装饰器装饰内容说明@State基本数据类型，类，数组修饰的状态数据被修改时会执行自定义组件build方法中的部分UI描述（使用该状态变量的UI组件）来进行UI界面更新。@Prop基本数据类型修改后的状态数据用于在父组件和子组件之间建立单向数据依赖关系。修改父组件关联数据时，当前组件会重新渲染。@Link基本数据类型，类，数组父子组件之间的双向数据绑定，父组件的内部状态数据作为数据源，任何一方所做的修改都会反映给另一方。@Observed类@Observed应用于类，表示该类中的数据变更被UI页面管理。@ObjectLink被@Observed所装饰类的对象@ObjectLink装饰的状态数据被修改时，在父组件或者其他兄弟组件内与它关联的状态数据所在的组件都会重新渲染。@Provide基本数据类型，类，数组@Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面重新渲染。@Consume基本数据类型，类，数组@Consume装饰的变量在感知到@Provide装饰的变量更新后，会触发当前自定义组件的重新渲染。@State@State装饰的变量是组件内部的状态数据，当这些状态数据被修改时，将会调用所在组件的build方法中的部分UI描述（使用该状态变量的UI组件相关描述）进行UI刷新。@State状态数据具有以下特征：支持多种类型数据：支持class、number、boolean、string强类型数据的值类型和引用类型，以及这些强类型构成的数组，即Array<class>、Array<string>、Array<boolean>、Array<number>。不支持any。支持多实例：组件不同实例的内部状态数据独立。内部私有：标记为@State的属性是私有变量，只能在组件内访问。需要本地初始化：必须为所有@State变量分配初始值，变量未初始化可能导致未定义的框架异常行为。创建自定义组件时支持通过状态变量名设置初始值：在创建组件实例时，可以通过变量名显式指定@State状态变量的初始值。@State@State使用示例1.定义一个MyComponent组件，使用@State装饰count变量@Componentstruct

MyComponent

{

@State

count:

number

=

0

private

title:

string

=

''

private

increaseBy:

number

=

1

build()

{

Column()

{

Text(this.title).fontSize(20)

Button(`Click

to

increase

count=${this.count}`)

.margin(20)

.onClick(()

=>

{

//

修改内部状态变量count

this.count

+=

this.increaseBy

})

}

}}@State2.在页面中创建两个MyComponent组件实例，并初始化实例变量。完成后在预览器中测试效果。@Entry@Componentstruct

EntryComponent

{

build()

{

Column()

{

MyComponent({

title:

'MyComponent1',

count:

0,

increaseBy:

1

})

//

第1个MyComponent实例

MyComponent({

title:

'MyComponent2',

count:

2,

increaseBy:

2

})

//

第2个MyComponent实例

}

}}@Prop@Prop与@State有相同的语义，但初始化方式不同。@Prop装饰的变量必须使用其父组件提供的@State变量进行初始化，允许组件内部修改@Prop变量，但变量的更改不会通知给父组件，父组件变量的更改会同步到@prop装饰的变量，即@Prop属于单向数据绑定。@Prop状态数据具有以下特征：支持多种类型数据：支持number、boolean、string类型数据私有：仅支持组件内访问；支持多个实例：一个组件中可以定义多个标有@Prop的属性；创建自定义组件时将按值传递方式给@Prop变量进行初始化：在创建组件的新实例时，必须初始化所有@Prop变量，不支持在组件内部进行初始化。@Prop@Prop使用示例1.定义一个CountDownComponent组件，使用@Prop装饰count变量@Componentstruct

CountDownComponent

{

@Prop

count:

number

private

costOfOneAttempt:

number

build()

{

Column()

{

if

(this.count

>

0)

{

Text(`You

have

${this.count}

Nuggets

left`).fontSize(18)

}

else

{

Text('Game

over!').fontSize(18)

}

Button('count

-

costOfOneAttempt')

.margin(15)

.onClick(()

=>

{

this.count

-=

this.costOfOneAttempt

})

}

}}@Prop2.在页面中创建MyComponent组件实例,如下所示。完成后在预览器中测试效果。@Entry@Componentstruct

ParentComponent

{

@State

countDownStartValue:

number

=

10

//

初始化countDownStartValue

build()

{

Column()

{

Text(`Grant

${this.countDownStartValue}

nuggets

to

play.`).fontSize(18)

Button('+1

-

Nuggets

in

New

Game')

.margin(15)

.onClick(()

=>

{

this.countDownStartValue

+=

1

})

Button('-1

-

Nuggets

in

New

Game')

.margin(15)

.onClick(()

=>

{

this.countDownStartValue

-=

1

})

//

创建子组件时，必须在构造函数参数中提供其@Prop变量count的初始值，同时初始化常规变量costOfOneAttempt（非Prop变量）

CountDownComponent({

count:

this.countDownStartValue,

costOfOneAttempt:

2

})

}

}}@Link@Link装饰的变量可以和父组件的@State变量建立双向数据绑定：@Link状态数据具有以下特征：支持多种类型：@Link支持的数据类型与@State相同，即class、number、string、boolean或这些类型的数组；私有：仅支持组件内访问；单个数据源：父组件中用于初始化子组件@Link变量的必须是父组件定义的状态变量；双向通信：子组件对@Link变量的更改将同步修改父组件中的@State变量；创建自定义组件时需要将变量的引用传递给@Link变量，在创建组件的新实例时，必须使用命名参数初始化所有@Link变量。@Link变量可以使用@State变量或@Link变量的引用进行初始化，@State变量可以通过'$'操作符创建引用。@Link@Link使用示例1.定义一个PlayButton组件，使用@Link装饰PlayButton变量@Componentstruct

PlayButton

{

@Link

buttonPlaying:

boolean

build()

{

Column()

{

Button(this.buttonPlaying

?

'pause'

:

'play')

.margin(20)

.onClick(()

=>

{

this.buttonPlaying

=

!this.buttonPlaying

})

}

}}@Link2.在页面中创建PlayButton组件实例,如下所示。完成后在预览器中测试效果。@Entry@Componentstruct

Player

{

@State

isPlaying:

boolean

=

false

build()

{

Column()

{

PlayButton({

buttonPlaying:

$isPlaying

})

Text(`Player

is

${this.isPlaying

?

''

:

'not'}

playing`).fontSize(18)

Button('Parent:'

+

this.isPlaying)

.margin(15)

.onClick(()

=>

{

this.isPlaying

=

!this.isPlaying

})

}

}}@Link、@State和@Prop结合使用示例1.定义一个ChildA组件，使用@Prop装饰counterVal变量@Componentstruct

ChildA

{

@Prop

counterVal:

number

build()

{

Button(`ChildA:

(${this.counterVal})

+

1`)

.margin(15)

.onClick(()

=>

{

this.counterVal

+=

1

})

}}@Link、@State和@Prop结合使用示例2.定义一个ChildB组件，使用@Link装饰counterRef变量@Componentstruct

ChildB

{

@Link

counterRef:

number

build()

{

Button(`ChildB:

(${this.counterRef})

+

1`)

.margin(15)

.onClick(()

=>

{

this.counterRef

+=

1

})

}}@Link、@State和@Prop结合使用示例3.在页面中创建ChildA与ChildB实例，如下所示。完成后在预览器中测试效果。@Entry@Componentstruct

ParentView

{

@State

counter:

number

=

0

build()

{

Column()

{

ChildA({

counterVal:

this.counter

})

ChildB({

counterRef:

$counter

})

}

}}@Provide和@Consume@Provide作为数据的提供方，可以更新其子孙节点的数据，并触发页面渲染。@Consume在感知到@Provide数据的更新后，会触发当前自定义组件的重新渲染。@Provide：必须设置初始值@Consume：不可设置默认初始值。@Provide和@Consume@Provide配合@Consume使用示例1.创建孙组件CompC，在孙组件中使用@Consume装饰变量reviewVotes@Componentstruct

CompC

{

@Consume("reviewVote")

reviewVotes:

number

build()

{

Column()

{

Button(`CompC:

${this.reviewVotes}`)

.margin(10)

.onClick(()

=>

{

this.reviewVotes

+=

1

})

}.width('100%')

}}@Provide和@Consume2.创建子组件CompB，在子组件中创建孙组件CompC对象@Componentstruct

CompB

{

build()

{

Column()

{

CompC()

}

}}@Provide和@Consume3.在页面CompA中使用@Provide装饰变量reviewVotes，并创建子组件CompB对象。完成后打开预览器测试效果。@Entry@Componentstruct

CompA

{

@Provide("reviewVote")

reviewVotes:

number

=

0;

build()

{

Column()

{

CompB()

Button(`CompA:

${this.reviewVotes}`)

.margin(10)

.onClick(()

=>

{

this.reviewVotes

+=

1;

})

}

}}@Observed和ObjectLink数据管理@State配合@Link在父子组件实现对象全部信息同步@ObjectLink配合@Observed来实现对象部分信息同步@Observed和ObjectLink数据管理@Observed和ObjectLink设置要求：@Observed用于类，@ObjectLink用于变量。@ObjectLink装饰的变量类型必须为类（classtype）。类要被@Observed装饰器所装饰。@ObjectLink装饰的变量是不可变的。属性的改动是被允许的，当改动发生时，如果同一个对象被多个@ObjectLink变量所引用，那么所有拥有这些变量的自定义组件都会被通知进行重新渲染。@ObjectLink装饰的变量不可设置默认值。必须让父组件中有一个由@State、@Link、@StorageLink、@Provide或@Consume装饰的变量所参与的TS表达式进行初始化。@ObjectLink装饰的变量是私有变量，只能在组件内访问。@Observed和ObjectLink数据管理@Observed和ObjectLink使用示例：1.定义一个类ClassA，使用@Observed装饰该类var

nextID:

number

=

0@Observedclass

ClassA

{

public

name:

string

public

c:

number

public

id:

number

constructor(c:

number,

name:

string

=

'OK')

{

this.name

=

name

this.c

=

c

this.id

=

nextID++

}}@Observed和ObjectLink数据管理2.定义一个子组件ViewA，使用@ObjectLink装饰ClassA的对象@Componentstruct

ViewA

{

label:

string

=

'ViewA1'

@ObjectLink

a:

ClassA

build()

{

Row()

{

Button(`ViewA

[${this.label}]

this.a.c=

${this.a.c}

+1`)

.onClick(()

=>

{

this.a.c

+=

1

})

}.margin({

top:

10

})

}}@Observed和ObjectLink数据管理3.在页面ViewB中，初始化元素类型为ClassA的数组，使用ForEach为数组的每个对象创建一个子组件ClassA。完成后打开预览器测试效果。@Entry@Componentstruct

ViewB

{

@State

arrA:

ClassA[]

=

[new

ClassA(0),

new

ClassA(0)]

build()

{

Column()

{

ForEach(this.arrA,

(item)

=>

{

ViewA({

label:

`#${item.id}`,

a:

item

})

},

(item)

=>

item.id.toString())

...

}.width('100%')

}}@Watch@Watch用于监听状态变量的变化，语法结构为：@State

@Watch("onChanged")c