ArkTS的变量状态管理

ArkTS的变量状态管理

一、@State动态渲染UI页面

语法：

@State 成员变量: type = 值

这个时候，如果在组件中动态修改这个成员变量，UI页面也会同步更改

但是，当存在嵌套的时候，UI渲染只会动态修改第一层的修改，除非整体修改，

示例：

@State cat: Cat = {
	name: ''
	color: {
		value: ''
	}
}

当你去修改 name，和 color（整体）时，可以做到动态渲染，但是如果你单独去修改 value ，则不会做到动态渲染

二、父子组件间的变量通信

1. 父传子，子传孙

使用@Prop来实现上面这种单项传递

步骤：

I. 在子组件的变量上面添上注解 @Prop 表示这个参数可以接受父组件传过来的值

II.在父组件调用时，对该参数赋值

示例：

子组件：

@Component
export default struct SonCom {
  @Prop mesForFather: string = '子组件的默认值'   // 该参数可以接受父组件的传值

  build() {
    Column() {
      Text(this.mesForFather)
        .fontSize(20)
        .height(50)
        .textAlign(TextAlign.Center)
    }
    .width("100%")
    .height(50)
    .borderRadius(20)
    .border({
      width: 1
    })
  }
}

父组件：

import SonCom from '../components/SonCom'

@Entry
@Component
struct Index {
  build() {
    Column() {

      Column({ space: 15 }) {
        SonCom()
        SonCom({ mesForFather: '这是父组件传的文字' })   // 对 mesForFather 进行传值，注意传值方法
      }
      .width('80%')
      .backgroundColor('#D4F6FF')
      .height(500)
      .justifyContent(FlexAlign.Center)
    }
    .width("100%")
  }
}

2. 子传父，父传子

使用@Link实现父组件和子组件的双向同步传递，这就很像vue的数据双向绑定了

使用步骤：

I. 将父组件的状态属性传递给子组件

II.子组件通过@Link修饰即可

示例：

@Entry
@Component
struct Index {
  @State count: number = 0

  build() {
    Column() {
      Text('父组件')
        .fontSize(30)
      Text(this.count.toString())
      Button('修改数据').onClick(() => {
        this.count++;
      })

      SonComponent({ count: this.count })
    }
    .width("100%")
    .height('100%')
  }
}

@Component
struct SonComponent {
  @Link count: number

  build() {
    Column() {
      Text('我是子组件')
        .fontSize(20)
      Text(this.count.toString())

      Button('修改数据').onClick(() => {
        this.count++;
      })
    }
  }
}

三、@Observed，@ObjectLink嵌套对象的动态UI渲染

由于@State只能对于第一次数据得到修改的时候，UI层才会动态渲染，

所以就引申出上面两个装饰器来对嵌套对象和数组进行动态渲染。

注意：

@ObjectLink不能用在@Entry修饰的组件中

使用步骤：

1. 定义一个类或者接口，使用@Observed监听它的改变情况
2. 在需要调用上面类或者接口的成员变量前加上@ObjectLink, 表示它的改变会引起监听，以便于动态渲染UI界面

示例：

interface IPerson {
  id: number
  name: string
  age: number
}

// Observed 观察，会监视下面这个类的更改，只要有那内容出现了改变，那就会主动刷新UI界面
@Observed
class Person implements IPerson {
  id: number
  name: string
  age: number

  constructor(config: IPerson) {
    this.id = config.id
    this.name = config.name
    this.age = config.age
  }
}

@Entry
@Component
struct ObservedAndLink {
  @State personList: Person[] = [
    new Person({
      id: 1,
      name: '张三',
      age: 18
    }),
    new Person({
      id: 2,
      name: '李四',
      age: 19
    }),
    new Person({
      id: 3,
      name: '王五',
      age: 20
    })
  ]

  build() {
    Column() {
      Text('父组件').fontSize(30)
      List({ space: 10 }) {
        ForEach(this.personList, (item: Person, index: number) => {
          ItemCom({
            info: item,
            // addAge: () => {
            //   // item.age++
            //   // this.personList.splice(index, 1, item)
            // }
          })
        })
      }
    }
  }
}

@Component
struct ItemCom {
//建立监听依赖，当info里面的值改变时，引起UI界面
  @ObjectLink info: Person
  addAge = () => {

  }

  build() {
    ListItem() {
      Row({ space: 10 }) {
        Text('姓名' + this.info.name)
        Text('年龄' + this.info.age)
        Blank()
        Button('修改数据').onClick(() => {
          this.info.age++
          // this.addAge()
        })
      }
    }
    .backgroundColor(Color.Pink)
    .padding(10)
    .width('100%')

  }
}