更多内容请访问：与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com前言在学习ArkUI开发的过程中，难免会避开管理组件拥有的状态。这个名词听起来可能很高大上，可能有点难以理解，但实际上，管理组件的状态就是使用了@State、@Prop、@Link这三个关键字。话不多说，开始今天的分享。用@State@State文字修饰的变量是组件内部的状态数据。当状态数据被修改时，会调用组件的build方法刷新UI。@State可以修改class、number、boolean、string、数组这些类型。定义被@State修饰的变量时，给变量赋初值，否则框架的行为可能是未定义的。在创建组件实例时，可以通过变量名显式指定@State状态属性的初始值。一般情况下，当这个变量发生变化时，会再次调用，重新刷新这个变量有用的组件。在一个简单的演示中理解这一点。在demo中，我们使用@State修改了一个数字变量，记录了Text被点击的次数，并实时显示该变量在Text中。@Statenum:number=0;build(){Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Center,justifyContent:FlexAlign.Center}){Text('点击次数:'+this.num).fontSize(50).fontWeight(FontWeight.Bold).onClick(()=>{this.num++;console.info('num:'+this.num.toString())})}.width('100%')。height('100%')}那么如果我们去掉@State，变量num也会改变，也就是说控制台上还是会输出num的值，但是Text中的text不会改变变量num实时显示。@Prop@Prop与@State具有相同的语义，但初始化方式不同。用@Prop修饰的变量必须使用其父组件提供的@State变量进行初始化，允许组件在内部修改@Prop变量，但不会通知父组件进行上述更改，即@Prop属于单向数据绑定。也就是说@State修饰的变量发生变化，会导致@Prop修饰的变量发生变化，反之则不然。只支持简单类型：number、string、boolean在创建组件的新实例时，必须初始化所有@Prop变量，不支持在组件内部初始化。结合下面的简单demo，理解起来会更快。单击A按钮将使numA增加1，向numA增加1也会导致numB增加1。但是点击B按钮，numB加一，不会导致numA加一。@Entry@ComponentstructPage_prop{@StatenumA:number=0build(){Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Center,justifyContent:FlexAlign.Center}){Row(){Button('numA加一').padding({right:20}).onClick(()=>{this.numA++;})Text('numA:'+this.numA).fontSize(40).fontWeight(FontWeight.Bold)}numB_prop({numB:this.numA})}.width('100%').height('100%')}}@ComponentstructnumB_prop{@PropnumB:numberbuild(){Flex({direction:FlexDirection.Row,alignItems:ItemAlign.Center,justifyContent:FlexAlign.Center}){Button('numBaddone').padding({right:20}).onClick(()=>{this.numB++;})Text('numB:'+this.numB).fontSize(40).fontWeight(FontWeight.Bold)}}}@Link如果有@Prop的单向数据绑定，自然会有@Link的双向数据绑定。@Link支持的数据类型和@State一样，支持class、number、boolean、string、array这几种类型。但@Link与前两者不同的是，它可以通过引用@Link变量或@State变量来进行初始化。@State变量可以通过“$”运算符引用。@Entry@ComponentstructPage_link{@StatenumA:number=0build(){Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Center,justifyContent:FlexAlign.Center}){Row(){Button('numA加一').padding({right:20}).onClick(()=>{this.numA++;})Text('numA:'+this.numA).fontSize(40).fontWeight(FontWeight.Bold)}numB_link({numB:$numA})}.width('100%').height('100%')}}@ComponentstructnumB_link{@LinknumB:numberbuild(){Flex({direction:FlexDirection.Row,alignItems:ItemAlign.Center,justifyContent:FlexAlign.Center}){Button('numBaddone').padding({right:20}).onClick(()=>{this.numB++;})Text('numB:'+this.numB).fontSize(40).fontWeight(FontWeight.Bold)}}}通过以上三个例子的学习，相信大家已经对管理组件的状态有了一定的了解。更多信息请访问：与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com
