说说鸿蒙里面的@styles/@extend/@builder区别？为什么使用ta们，有什么好处及优势？（样式&结构重用）

#为什么使用ta们，有什么好处及优势？

随着页面复杂程度提高，页面中会有很多的样式&结构代码，其中难免重复的部分，如果可以提取出来重复使用，就可以提升编码效率，减少重复代码，提升代码可读性。

1. @Styles: 抽取公共样式、事件
2. @Extend：扩展组件样式、事件
3. @Builder：轻量级的元素复用机制（结构、样式、事件）- 常用

#@Styles

##@@Styles装饰器：定义组件重用样式

@Styles装饰器可以将多条样式设置提炼成一个方法，直接在组件声明的位置调用。通过@Styles装饰器可以快速定义并复用自定义样式。用于快速定义并复用自定义样式。

注意：

1. @Styles 不支持传递参数
2. 可以继续添加样式覆盖 @Styles 中定义的内容
3. 组件内部写法，可以通过 this 访问组件属性

##语法：

// 全局定义
@Styles function functionName() {
  .通用属性()
  .通用事件(()=>{})
}
@Entry
@Component
struct FancyUse {
  // 在组件内定义
  @Styles fancy() {
      .通用属性()
      .通用事件(()=>{
        this.xxx
      })
  }
  build() {
    Column(){
      // 使用
      组件().fancy()
      组件().functionName()
    }
  }
}

#@Extend

##@Extend装饰器：定义扩展组件样式

和@Styles不同，@Extend仅支持在全局定义，不支持在组件内部定义。

 只能在当前文件内使用，不支持export。

和@Styles不同，@Extend支持封装指定组件的私有属性、私有事件和自身定义的全局方法。

和@Styles不同，@Extend装饰的方法支持参数，开发者可以在调用时传递参数，调用遵循TS方法传值调用。

@Extend的参数可以为状态变量，当状态变量改变时，UI可以正常的被刷新渲染。

##语法：

// 定义
@Extend(组件名) 
function functionName(参数1....) {
  .属性()
  .事件(()=>{})
}
// 使用
组件(){}
  .functionName(参数1...)

#@Builder

##@Builder装饰器：自定义构建函数

如果连结构也需要抽取，就可以使用@Builder，他也可以叫做 自定义构建函数

##自定义组件内自定义构建函数

###定义的语法：

@Builder MyBuilderFunction() { ... }

###使用方法：

this.MyBuilderFunction()

允许在自定义组件内定义一个或多个@Builder方法，该方法被认为是该组件的私有、特殊类型的成员函数。

自定义构建函数可以在所属组件的build方法和其他自定义构建函数中调用，但不允许在组件外调用。

在自定义函数体中，this指代当前所属组件，组件的状态变量可以在自定义构建函数内访问。建议通过this访问自定义组件的状态变量而不是参数传递。

##全局自定义构建函数

###定义的语法：

@Builder function MyGlobalBuilderFunction() { ... }

###使用方法：

MyGlobalBuilderFunction()

如果不涉及组件状态变化，建议使用全局的自定义构建方法。

参数传递规则

自定义构建函数的参数传递有按值传递和按引用传递两种，均需遵守以下规则：

参数的类型必须与参数声明的类型一致，不允许undefined、null和返回undefined、null的表达式。

在@Builder修饰的函数内部，不允许改变参数值。

@Builder内UI语法遵循UI语法规则。

只有传入一个参数，且参数需要直接传入对象字面量才会按引用传递该参数，其余传递方式均为按值传递。

#@styles/@extend/@builder区别

名称	适合	参数
@Styles	抽取 公共样式、事件	不可以传递参数, 全局或组件内定义
@Extend(组件名)	抽取 特定组件 样式、事件	可以传递参数, 只能全局定义
@Builder	抽取 结构、样式、事件	可以传递参数, 全局或组件内定义