diff --git a/en/application-dev/quick-start/arkts-create-custom-components.md b/en/application-dev/quick-start/arkts-create-custom-components.md index a747ba48ccf234f2ece8f7bd41bfe5a6f6799f86..b094ff46868af53f56627b1cfe2c5f297284f938 100644 --- a/en/application-dev/quick-start/arkts-create-custom-components.md +++ b/en/application-dev/quick-start/arkts-create-custom-components.md @@ -114,15 +114,28 @@ To fully understand the preceding example, a knowledge of the following concepts } ``` +- \@Recycle: A custom component decorated with \@Recycle can be reused. + + > **NOTE** + > + > Since API version 10, this decorator is supported in ArkTS widgets. + + ```ts + @Recycle + @Component + struct MyComponent { + } + ``` + ## Member Functions/Variables -In addition to the mandatory** build()** function, a custom component may implement other member functions with the following restrictions: +In addition to the mandatory **build()** function, a custom component may implement other member functions with the following restrictions: - Static functions are not supported. -- Access to the member functions is always private. Defining **private** access is optional. Defining access other than **private** is a syntax error. +- Access to the member functions is always private. A custom component can also implement member variables with the following restrictions: @@ -130,7 +143,7 @@ A custom component can also implement member variables with the following restri - Static member variables are not supported. -- Access to the member variables is always private.The access rules of member variables are the same as those of member functions. +- Access to the member variables is always private. The access rules of member variables are the same as those of member functions. - Local initialization is optional for some member variables and mandatory for others. For details about whether local initialization or initialization from the parent component is required, see [State Management](arkts-state-management-overview.md). @@ -378,4 +391,5 @@ In the preceding example: 2. The **StyleExample** parent component holds a **Controller** instance and with which calls the **changeText** API of **Controller**. That is, the value of the state variable **value** of **MyComponent** is changed through the **this** pointer of the **MyComponent** child component held by the controller. Through the encapsulation of the controller, **MyComponent** exposes the **changeText** API. All instances that hold the controller can call the **changeText** API to change the value of the **MyComponent** state variable **value**. + diff --git a/en/application-dev/quick-start/arkts-state-management-overview.md b/en/application-dev/quick-start/arkts-state-management-overview.md index 3009306fa7b6ae61c9c9730635e5dc00fbe32dd2..09db3f3183cd8156d532be741698fcc2fbfd26ef 100644 --- a/en/application-dev/quick-start/arkts-state-management-overview.md +++ b/en/application-dev/quick-start/arkts-state-management-overview.md @@ -82,7 +82,7 @@ According to the data transfer mode and synchronization type, decorators can als - Decorators that allow for two-way (mutable) transfer -The following figure illustrates the decorators. For details, see [Managing State by a Component](arkts-state.md) and [Managing State by an Application](arkts-application-state-management-overview.md). You can use these decorators at your disposal to implement linkage between data and the UI. +The following figure illustrates the decorators. For details, see [Component State Management](arkts-state.md) and [Application State Management](arkts-application-state-management-overview.md). You can use these decorators at your disposal to implement linkage between data and the UI. ![en-us_image_0000001502704640](figures/en-us_image_0000001502704640.png) @@ -106,6 +106,10 @@ Decorators for [managing the state owned by a component](arkts-state.md): - \@ObjectLink: An \@ObjectLink decorated variable, when used with an \@Observed decorated class of the parent component, is for two-way data synchronization in scenarios involving multiple levels of nested objects or arrays in the class. +> **NOTE** +> +> Only [\@Observed/\@ObjectLink](arkts-observed-and-objectlink.md) can observe changes of nested attributes. Other decorators can only observe changes of attributes at the first layer. For details, see the "Observed Changes and Behavior" part in each decorator section. + Decorators for [managing the state owned by an application](arkts-state.md): diff --git a/en/application-dev/quick-start/arkts-state.md b/en/application-dev/quick-start/arkts-state.md index d9cc3c750e3b2d5ad6a1adb539b177f797c62402..6ac35e388df8471d78245fd52fa82aa8a5a7f580 100644 --- a/en/application-dev/quick-start/arkts-state.md +++ b/en/application-dev/quick-start/arkts-state.md @@ -231,11 +231,11 @@ struct MyComponent { Text(`${this.title.value}`) Button(`Click to change title`).onClick(() => { // The update of the @State decorated variable triggers the update of the component. - this.title.value = this.title.value === 'Hello ArkUI' ? 'Hello World' : 'HelloArkUI'; + this.title.value = this.title.value === 'Hello ArkUI' ? 'Hello World' : 'Hello ArkUI'; }) Button(`Click to increase count=${this.count}`).onClick(() => { - // The update of the @State decorated variable triggers the update of the component. + // The update of the @State decorated variable triggers the update of the