开源鸿蒙 @Consume and @Provide

2022-08-09
浏览 (516)

@Consume and @Provide

As the data provider, @Provide can update the data of child nodes and trigger page rendering. After @Consume detects that the @Provide data is updated, it will initiate re-rendering of the current view.

Table1 @Provide

| Name | Description | | ——– | ——– | | Decorator parameter | A constant of the string type, which is used to set an alias for a decorated variable. If an alias is specified, implement the data update for this alias. If there is no alias, use the variable name as the alias. @Provide(”alias”) is recommended. | | Synchronization mechanism | The @Provide decorated variable is similar to the @state variable. You can modify the variable to re-render the page. You can also modify the @Consume decorated variable to modify the @State decorated variable reversely. | | Initial value | The initial value must be set. | | Page re-rendering scenarios | The following will trigger page re-rendering:
- Changes of variables in primitive types (boolean, string, and number)
- Changes of the @Observed decorated classes or their attributes
- Adding, deleting, or updatingelements in an array |

Table2 @Consume

NOTE: To avoid infinite loops caused by circular reference, exercise caution when using @Provide and @Consume.

The description of other attributes is the same as that of @Provide.

@Entry
@Component
struct CompA {
    @Provide("reviewVote") reviewVotes : number = 0;

    build() {
        Column() {
            CompB()
            Button() {
                Text(`${this.reviewVotes}`)
                    .fontSize(30)
            }
            .onClick(() => {
                this.reviewVotes += 1;
            })
        }
    }
}

@Component
struct CompB {
    build() {
        Column() {
            CompC()
        }
    }
}

@Component
struct CompC {
    @Consume("reviewVote") reviewVotes : number;
    build() {
        Column() {
            Button() {
                Text(`${this.reviewVotes}`)
                    .fontSize(30)
            }
            .onClick(() => {
                this.reviewVotes += 1;
            })
        }
    }
}