1# AttributeUpdater 2 3## Overview 4When dealing with frequent updates to a large number of attributes, using state variables can lead to significant computational overhead in frontend state management, requiring full updates of all attributes for individual components. Although the **AttributeModifier** mechanism allows for selective updates based on needs, the frontend still applies some default strategies for differentiation (diffing) and resetting attributes. 5 6This is where **AttributeUpdater** comes into the picture. As a special type of **AttributeModifier**, **AttributeUpdater** not only inherits the capabilities of **AttributeModifier** but also provides the capability to obtain the attribute object. By using the attribute object, you can update specific attributes without relying on state variables. With **AttributeUpdater**, you can implement custom update strategies, further improving the performance of attribute updates. However, due to its flexibility, it does not enforce the "single source of truth" rule, and there is a risk of conflicts when the same properties are updated through both **AttributeUpdater** and state variables. You need to ensure the rationality of attribute settings to prevent conflicts. 7 8## API 9 10```ts 11export declare class AttributeUpdater<T, C = Initializer<T>> implements AttributeModifier<T> { 12 applyNormalAttribute?(instance: T): void; 13 initializeModifier(instance: T): void; 14 get attribute(): T | undefined; 15 updateConstructorParams: C; 16} 17``` 18 19**AttributeUpdater** implements the **AttributeModifier** API and provides additional functionality beyond the standard capabilities of **AttributeModifier**: It provides **initializeModifier** to initialize the attributes of a component, **attribute** to obtain the attribute object (which enables direct updates to the corresponding component's attributes), and **updateConstructorParams** to directly update the component's constructor parameters. 20 21## Behavior Specifications 22 23- You can implement the **AttributeUpdater\<T>** class and set it up through **AttributeModifier** of the component. When the binding is first established, the **initializeModifier** API is triggered to initialize attributes. The subsequent lifecycle events are consistent with those of **AttributeModifier**. 24- After the component is initialized, you can obtain the attribute object through the **attribute** method of the **AttributeUpdater** instance. If the component is not initialized, the result will be **undefined**. 25- Directly modifying attributes through **attribute** will store the latest settings within the current object and immediately trigger an update of the component's attributes. 26- Marking an instance of **AttributeUpdater** as a state variable for modification, or updating the attributes of the corresponding component through other state variables, will trigger **applyNormalAttribute**. If you do not override this logic, by default, all the attribute recorded by the **attribute** object will be updated in batch. 27- If you override the logic of **applyNormalAttribute** and do not call the **super** method, you will not be able to obtain the attribute object, and the **initializeModifier** method will not be invoked. 28- A single **AttributeUpdater** object can be associated with only one component. If it is associated with multiple components, only one component will have its attribute settings take effect. 29 30## Directly Modifying Attributes Through Modifier 31 32After the component is initialized, you can use the **attribute** method of the **AttributeUpdater** instance to obtain the attribute object. You can then directly modify the attributes through this attribute object, which will immediately trigger an update of the component's attributes. 33 34```ts 35import { AttributeUpdater } from '@ohos.arkui.modifier' 36 37class MyButtonModifier extends AttributeUpdater<ButtonAttribute> { 38 initializeModifier(instance: ButtonAttribute): void { 39 instance.backgroundColor('#2787D9') 40 .width('50%') 41 .height(30) 42 } 43} 44 45@Entry 46@Component 47struct updaterDemo { 48 modifier: MyButtonModifier = new MyButtonModifier() 49 50 build() { 51 Row() { 52 Column() { 53 Button("Button") 54 .attributeModifier(this.modifier) 55 .onClick(() => { 56 this.modifier.attribute?.backgroundColor('#17A98D').width('30%') 57 }) 58 } 59 .width('100%') 60 } 61 .height('100%') 62 } 63} 64``` 65 66 67 68## Updating Component Constructor Parameters Through Modifier 69You can directly update the constructor parameters of a component using the **updateConstructorParams** method of the **AttributeUpdater** instance. 70 71```ts 72import { AttributeUpdater } from '@ohos.arkui.modifier' 73 74class MyTextModifier extends AttributeUpdater<TextAttribute, TextInterface> { 75 initializeModifier(instance: TextAttribute): void { 76 } 77} 78 79@Entry 80@Component 81struct updaterDemo { 82 modifier: MyTextModifier = new MyTextModifier() 83 84 build() { 85 Row() { 86 Column() { 87 Text("Text") 88 .attributeModifier(this.modifier) 89 .fontColor(Color.White) 90 .fontSize(14) 91 .border({ width: 1 }) 92 .textAlign(TextAlign.Center) 93 .lineHeight(20) 94 .width(200) 95 .height(50) 96 .backgroundColor('#2787D9') 97 .onClick(() => { 98 this.modifier.updateConstructorParams('Update'); 99 }) 100 } 101 .width('100%') 102 } 103 .height('100%') 104 } 105} 106``` 107 108
