@Builder VS @LocalBuilder 怎么选择使用

🎯 @Builder VS @LocalBuilder 怎么选择使用

⭐⭐⭐

ℹ️ 提示

builder这个老演员就不多赘述，让我们看看localBuilder具体是干啥的

• @Builder装饰器：自定义构建函数 上期@Builder装饰器的讲解
• @LocalBuilder装饰器： 维持组件关系

❗❗❗区别

@LocalBuilder只能局部使用

@LocalBuilder无论是否使用.bind(this)都不会改变父子关系

跨组件传递局部@Builder会使用.bind(this)更改函数上下文，会导致父子关系不一致

@ComponentV2
struct Son {
  @Local label: string = 'son'
  @BuilderParam customBuilderParam: () => void

  build() {
    Column() {
      this.customBuilderParam()
    }
  }
}

@Entry
@ComponentV2
struct LocalBuilderCase {
  @Local label: string = 'Father'

  @Builder
  componentBuilder() {
    Text(`${this.label}`)
    // 这里会显示Son
  }

  @LocalBuilder
  componentLocalBuilder() {
    Text(`${this.label}`)
    // 这里会显示Father
  }

  build() {
    Column() {
      Son({ customBuilderParam: this.componentBuilder })
      Son({ customBuilderParam: this.componentLocalBuilder })
    }
    .width('100%')
    .height('100%')
  }
}

📝 除了以上区别，其他的使用方式大致都是一样的，我认为在没有特殊场景的情况下直接使用@LocalBuilder即可

🌸🌼🌺