【HarmonyOS 鸿蒙 黑马程序员 学习笔记 101.1】

一级目录

本人实力有限无法演示此章节
点击跳转到原视频

@State 的状态

之前课程就有发现关于@State不刷新渲染问题
这里讲的就比较详细
简易示例

interface dx1 {
  name : string
  age : number
}
interface dx2 {
  name : string[]
  age : number[]
}

@Entry
@Component
struct Index {

  @State bl1 : string | number = 1
  @State bl2 : dx1 = {name:'名字',age:12}
  @State bl3 : dx2 = {name:['小明','小芳','大壮'],age:[12,11,13]}

  build() {
    Column(){
      //测试1
      Button('测试1 改 bl1').onClick(()=>{
        if (this.bl1 == 'true') {this.bl1 = 123}
        else {this.bl1 = 'true'}
      })
      Text(this.bl1.toString())
      //测试2
      Button('测试2 改 bl2').onClick(()=>{
        if (this.bl2.name == '小明') {this.bl2.name = '大壮'}
        else {this.bl2.name = '小明'}
      })
      Text(this.bl2.name)
      //测试3
      Button('测试3 改 bl3').onClick(()=>{
        if (this.bl3.name[0] == '小明') {this.bl3.name[0] = '小强'}
        else {this.bl3.name[0] = '小明'}
        //数组是没法直接进行比对的	IDE报错
        console.log('改bl3',this.bl3.name[0]) // 把console.log都卡没了 过了会好了-_-!
      })
      Text(this.bl3.name[0])
      //测试4
      Button('测试4 改 bl3').onClick(()=>{
        if (this.bl3.name[0] == '小明') {this.bl3.name = ['大明','大芳','大壮']}
        else {this.bl3.name = ['小明','小芳','小壮']}
        //console.log('改bl3')
        console.log('改 bl3',this.bl3.name)
      })
      Text(this.bl3.name[0])
      //测试5
      Button('Object.keys').onClick(()=>{
        console.log('Object.keys 打印 ',Object.keys(this.bl3))
      })
    }.width('100%').height('100%').backgroundColor('#aaa')
  }
}

变量本体为1级下一级为2级以此类推
测试3说明第2级变更是可以引起重新渲染
测试4说明第3级以后包含第3级变更就不会引起重新渲染