HarmonyOS Next V2 @Local 和@Param

@Local 背景

@Local 是harmony應(yīng)用開(kāi)發(fā)中的 v2 版本中對(duì)標(biāo)**@State**的狀態(tài)管理修飾器，它解決了 @State 對(duì)狀態(tài)變量更改的檢測(cè)混亂的問(wèn)題：

@State 修飾的狀態(tài)變量可以是組件內(nèi)部自己定義的
@State 修飾的狀態(tài) 也可以由外部父組件傳遞

這樣就導(dǎo)致了狀態(tài)數(shù)據(jù)來(lái)源不唯一，在大型項(xiàng)目中會(huì)引發(fā)難易檢測(cè)和維護(hù)狀態(tài)的問(wèn)題。如以下代碼：

@Entry
@Component
struct Index {
  @State num: number = 100

  build() {
    Column() {
      Text("父組件的數(shù)據(jù) " + this.num)

      Son({ num: this.num })
      Son()
    }
    .height('100%')
    .width('100%')
  }
}

@Component
struct Son {
  @State num: number = 0

  build() {
    Column() {
      Button(`子組件 ${this.num}`)
        .onClick(() = > {
          this.num++
        })
    }
  }
}

@Local 基本使用

@Local的出現(xiàn)就是為了解決這一類(lèi)問(wèn)題

@Local 只能用在 @Componentv2 修飾的組件上
被**@Local**裝飾的變量無(wú)法從外部初始化(無(wú)法由父組件傳遞進(jìn)來(lái))，因此必須在組件內(nèi)部進(jìn)行初始化

我們對(duì)上面代碼稍作修改

@Entry
@Component
struct Index {
  @State num: number = 100

  build() {
    Column() {
      Text("父組件的數(shù)據(jù) " + this.num)

      Son({ num: this.num }) // 這里就報(bào)錯(cuò)啦

      Son()
    }
    .height('100%')
    .width('100%')
  }
}

@ComponentV2 // 此處調(diào)整為 @ComponentV2
struct Son {

  // 此處調(diào)整為 @Local
  @Local num: number = 0

  build() {
    Column() {
      Button(`子組件 ${this.num}`)
        .onClick(() = > {
          this.num++
        })
    }
  }
}

@Local 與@State 對(duì)比

	@State	@Local
參數(shù)	無(wú)。	無(wú)。
從父組件初始化	可選。	不允許外部初始化。
觀察能力	能觀測(cè)變量本身以及一層的成員屬性，無(wú)法深度觀測(cè)。	能觀測(cè)變量本身，深度觀測(cè)依賴@Trace 裝飾器。
數(shù)據(jù)傳遞	可以作為數(shù)據(jù)源和子組件中狀態(tài)變量同步。	可以作為數(shù)據(jù)源和子組件中狀態(tài)變量同步。

@Local 特別注意

@Local 支持觀測(cè) number、boolean、string、Object、class 等基本類(lèi)型以及 Array、Set、Map、Date 等內(nèi)嵌類(lèi)型。
@Local 的觀測(cè)能力僅限于被裝飾的 變量本身 。當(dāng)裝飾簡(jiǎn)單類(lèi)型時(shí)，能夠觀測(cè)到對(duì)變量的賦值；當(dāng)裝飾對(duì)象類(lèi)型時(shí)，僅能觀測(cè)到對(duì)對(duì)象整體的賦值；當(dāng)裝飾數(shù)組類(lèi)型時(shí)，能觀測(cè)到數(shù)組整體以及數(shù)組元素項(xiàng)的變化；當(dāng)裝飾 Array、Set、Map、Date 等內(nèi)嵌類(lèi)型時(shí)，可以觀測(cè)到通過(guò) API 調(diào)用帶來(lái)的變化。

@Params

@Params主要表示子組件接收父組件傳遞的數(shù)據(jù)?？梢院?@Local 搭配一起使用

@Params 背景

在 V1 版本的狀態(tài)管理修飾符中，可以用來(lái)處理父子傳參的技術(shù)有：

普通屬性，不需要特別的修飾符，不具備單向同步
@Prop 單向同步，不能監(jiān)聽(tīng)深層次屬性的改變，也不能做到雙向同步
@Link 可以做到雙向同步，但是不能監(jiān)聽(tīng)深層次屬性的改變，而且不能直接用在列表渲染技術(shù) - ForEach 中
@ObjectLink 可以做到雙向同步，但是必須和 @Observed 搭配使用，而且只能用在自定義組件上

1. 普通屬性

普通屬性，不需要特別的修飾符，不具備單向同步

@Entry
@Component
struct Index {
  @State num: number = 100

  build() {
    Column() {
      // 父組件傳遞過(guò)去的數(shù)據(jù)
      Son({ num: this.num })
        .onClick(() = > {
          this.num++
          console.log("", this.num)
        })
    }
    .height('100%')
    .width('100%')
  }
}

@Component
struct Son {
  num: number = 0

  build() {
    Column() {
      Button(`子組件 ${this.num}`)
    }
  }
}

2. @Prop 單向同步

@Prop 單向同步

不能監(jiān)聽(tīng)深層次屬性的改變
也不能做到雙向同步

在上面代碼基礎(chǔ)上加入**@Prop**，可以檢測(cè)到基本類(lèi)型數(shù)據(jù)的更新

@Component
struct Son {
  @Prop num: number = 0

但是無(wú)法檢測(cè)深層次屬性的改變,如

class Animal {
  dog: Dog = {
    age: 100
  }
}

class Dog {
  age: number = 100
}

@Entry
@Component
struct Index {
  @State
  animal: Animal = new Animal()

  build() {
    Column() {
      // 父組件傳遞過(guò)去的數(shù)據(jù)
      Son({ dog: this.animal.dog })
        .onClick(() = > {
          this.animal.dog.age++
          console.log("", this.animal.dog.age)
        })
    }
    .height('100%')
    .width('100%')
  }
}

@Component
struct Son {
  @Prop dog: Dog

  build() {
    Column() {
      Button(`子組件 ${this.dog.age}`)
    }
  }
}

3. @Link 雙向同步

@Link 用法和@Prop 基本一致

可以做到雙向同步，但是

不能監(jiān)聽(tīng)深層次屬性的改變

而且不能直接用在列表渲染技術(shù) - ForEach 中 以下代碼演示這個(gè)效果

class Dog {
  age: number = 100
}

@Entry
@Component
struct Index {
  @State
  dogList: Dog [] = [new Dog(), new Dog(), new Dog(), new Dog()]

  build() {
    Column() {
      ForEach(this.dogList, (item: Dog) = > {
        // 此處會(huì)報(bào)錯(cuò)  Assigning the attribute 'item' to the '@Link' decorated attribute 'dog' is not allowed. < ArkTSCheck >
        Son({ dog: item })
          .onClick(() = > {
            item.age++
            console.log("", item.age)
          })
      })

    }
    .height('100%')
    .width('100%')
  }
}

@Component
struct Son {
  @Link dog: Dog

  build() {
    Column() {
      Button(`子組件 ${this.dog.age}`)
    }
  }
}

4. @ObjectLink

@ObjectLink 可以做到雙向同步，但是必須和 @Observed 搭配使用，而且只能用在自定義組件上

小結(jié)

可以看到，如果都是使用 v1 版本的這一套父子傳參的技術(shù)，是十分復(fù)雜難易直接上手使用的。

@Params 介紹

Param 表示組件從外部傳入的狀態(tài)，使得父子組件之間的數(shù)據(jù)能夠進(jìn)行同步：

@Param 裝飾的變量支持本地初始化，但是不允許在組件內(nèi)部直接修改變量本身。
- 如果不本地初始化，那么必須加入 @Require
@Param 可以做到單向同步
@Param 可以檢測(cè)深層次屬性的修改，但是該修改在數(shù)據(jù)源上必須是整體對(duì)象的更新
@Params 如果也想要深度監(jiān)聽(tīng)單個(gè)屬性的修改，那么需要使用 @ObservedV2 和 @Trace

以下代碼主要演示：@Param 可以檢測(cè)深層次屬性的修改，但是該修改在數(shù)據(jù)源上必須是整體對(duì)象的更新

class Person {
  age: number = 100
}
@Entry
@ComponentV2
struct Index {
  @Local
  person: Person = new Person()
  build() {
    Column() {
      Son({ age: this.person.age })
        .onClick(() = > {
          this.person.age++
          console.log("", this.person.age)
          if (this.person.age === 105) {
            const p = new Person()
            p.age = 200
            // 整體更新，子組件可以感知到
            this.person = p
          }
        })
    }
    .height('100%')
    .width('100%')
  }
}

@ComponentV2
struct Son {
  // 要么設(shè)置 @Require 表示父組件必須傳遞數(shù)據(jù)
  // 要么設(shè)置 默認(rèn)值
  @Require @Param age: number
  build() {
    Column() {
      Button(`子組件 ${this.age}`)
    }
  }
}

總結(jié)

@Local 可以看成是 @State 的替代，單獨(dú)表示組件內(nèi)部的狀態(tài)
@Params 可以看成 @Prop @Link @ObjectLink 的替代，更加嚴(yán)謹(jǐn)
@Local 和 @Params 搭配一起使用，都只能用在 @Componentv2 修飾的自定義組件上

審核編輯 黃宇

聲明：本文內(nèi)容及配圖由入駐作者撰寫(xiě)或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問(wèn)題，請(qǐng)聯(lián)系本站處理。舉報(bào)投訴