状体管理-装饰器

@State 自己的状态
注意:不是状态变量的所有更改都会引起刷新。只有可以被框架观察到的修改才会引起UI刷新。
1、boolean、string、number类型时，可以观察到数值的变化。
2、class或者Object时，可以观察 自身的赋值 的变化，第一层属性赋值的变化，即Object.keys(observedObject)返回的属性。

源代码：

index.ets:

import { componentUtils } from '@kit.ArkUI'

interface Car {
  name: string
}

interface Person {
  name: string,
  car: Car
}

const obj: Person = {
  name: 'zs',
  car: {
    name: '小黄车'
  }
}
console.log('查看第一层属性',Object.keys(obj))

@Entry
@Component
struct Index {
  // 状态变量
  // 1、string number boolean可以直接监视到变化
  @State message: string = 'hello world'
  // 2、复杂类型 object class 第一层随便改，嵌套的话需要进行整个嵌套对象的替换
  @State person: Person = {
    name: 'jack',
    car: {
      name: '宝马车'
    }
  }

  build() {
    Column({space: 10}) {
      Text(this.message).fontSize(20)
      Button('改message').onClick(() => {
        this.message = '你好'
      })
      Text(JSON.stringify(this.person))
      Button('改person').onClick(() => {
        // 1、全部修改可以
        // this.person = {
        //  name: 'any',
        //  car: {
        //    name: '保时捷'
        //  }
        // }
        // 2、修改name
        // this.person.name = 'tony'  修改第一层name可以
        // 如果不是对象的第一层属性，修改时，需要修改整个对象嵌套的对象，否则页面不会刷新，但是值已经改了
        // this.person.car.name = '小火车'  // 页面检测不到
        // console.log('car name', this.person.car.name )
        // this.person.car = {
        //   name: '小火车'
        // }
      })
    }
    .width('100%')
    .height('100%')
    .padding(20)
    .backgroundColor('#ccc')
  }
}

效果图：

@Prop 父子

@Prop - 父子单向
@Prop 装饰的变量可以和父组件建立单向的同步关系。
@Prop 装饰的变量是可变的，但是变化不会同步回其父组件。

源代码：

import { componentUtils } from '@kit.ArkUI'


@Component
struct SonCom {
  // 保证父组件的数据变化了，能够往下响应式的更新
  @Prop sCar: string = ''

  changeCar = ()=> {

  }

  build() {
    Column({space: 10}) {
      Text(`子组件 - ${this.sCar}`)
      Button('换车').onClick(() => {
        // 1、prop传值是单向传递
        // 子组件可以修改到 prop 传值，但是修改的更新不会同步到父组件
        // 通常不太会直接修改 prop 传值，因为父组件的状态一旦变化，会自动向下同步
        // this.sCar = '小黄车'

        // 2、如果实在想更新，希望保证父子同步 => 调用父组件传递过来的方法
        // 如果没有写箭头函数，意味着，this 指向调用者，而此处执行环境this -> 子组件
        this.changeCar()
      })
    }
    .padding(20)
    .backgroundColor(Color.Orange)
  }
}

@Entry
@Component
struct FatherCom {
  @State fCar: string = '劳斯莱斯'
  build() {
    Column({space: 10}) {
      Text(`父组件 - ${this.fCar}`)
      Button('换车').onClick(() => {
        this.fCar = '三轮车'
      })

      // 子组件
      SonCom({
        sCar: this.fCar,
        // 这里必须要用箭头函数，否则会有 this 指向的问题
        // 使用箭头函数的好处，会使用外部环境的this，不受传递过去的执行环境影响
        // 希望此处 this 指向的是父组件
        // changeCar(){
        changeCar: ()=> {
          console.log('这里可以写具体的业务逻辑')
          this.fCar = '超级大赛车'
        }
      })
    }
    .padding(50)
    .backgroundColor(Color.Pink)
  }
}

效果图：

@Prop 父向子练习

传参：

import { componentUtils } from '@kit.ArkUI'


@Component
struct SonCom {
  // 保证父组件的数据变化了，能够往下响应式的更新
  @Prop sCar: string = ''

  changeCar = (newCar: string)=> {

  }

  build() {
    Column({space: 10}) {
      Text(`子组件 - ${this.sCar}`)
      Button('换车').onClick(() => {
        // 1、prop传值是单向传递
        // 子组件可以修改到 prop 传值，但是修改的更新不会同步到父组件
        // 通常不太会直接修改 prop 传值，因为父组件的状态一旦变化，会自动向下同步
        // this.sCar = '小黄车'

        // 2、如果实在想更新，希望保证父子同步 => 调用父组件传递过来的方法
        // 如果没有写箭头函数，意味着，this 指向调用者，而此处执行环境this -> 子组件
        this.changeCar('老爷车')
      })
    }
    .padding(20)
    .backgroundColor(Color.Orange)
  }
}

@Entry
@Component
struct FatherCom {
  @State fCar: string = '劳斯莱斯'
  build() {
    Column({space: 10}) {
      Text(`父组件 - ${this.fCar}`)
      Button('换车').onClick(() => {
        this.fCar = '三轮车'
      })

      // 子组件
      SonCom({
        sCar: this.fCar,
        // 这里必须要用箭头函数，否则会有 this 指向的问题
        // 使用箭头函数的好处，会使用外部环境的this，不受传递过去的执行环境影响
        // 希望此处 this 指向的是父组件
        // changeCar(){
        changeCar: (newCar: string)=> {
          console.log('这里可以写具体的业务逻辑')
          this.fCar = newCar
        }
      })
    }
    .padding(50)
    .backgroundColor(Color.Pink)
  }
}

@Prop 父向子 练习二

import { componentUtils } from '@kit.ArkUI'

// comp
@Component
struct NumberCount {
  @Prop num: number = 1
  subFn = ()=> {

  }

  addFn = ()=> {

  }

  build() {
    // 数字框组件
    Row({ space: 5 }) {
      Button('-').onClick(() => {
        this.subFn()
      })
      Text(this.num.toString())
      Button('+').onClick(() => {
        this.addFn()
      })
    }
  }
}

@Entry
@Component
struct Index {
  @State num1: number = 5
  @State num2: number = 3
  build() {
    Column() {
      Row() {
        Text('茄子')
        NumberCount({ num: this.num1, addFn: () => {
          this.num1++
        }, subFn: ()=> {
          this.num1--
        }})
      }
      Row() {
        Text('香蕉')
        NumberCount({ num: this.num2, addFn: () => {
          this.num2++
        }, subFn: ()=> {
          this.num2++
        }})
      }
    }
  }
}

效果图：