DEV Community

ZHZL-m
ZHZL-m

Posted on

【Journey of HarmonyOS Next】ArkTS Syntax (4) -> Usage Limitations and Extensions

Image description

1 -> Usage limitations in generator functions

The use of the ArkTS language has certain limitations in generator functions:

Expressions are only allowed to be used in strings (${expression}), if conditions, arguments for ForEach, and arguments for components;
None of the expressions can result in a change in any of the application state variables (@ State, @ Link, @ Prop) that would otherwise result in undefined and potentially unstable framework behavior;
There can be no local variables inside the generator function.
None of the above limitations apply to anonymous function implementations of event handlers such as onClick.

2 -> Two-way binding of variables

ArkTS supports bidirectional binding of variables via $$, which is usually applied to variables with frequent changes in state values.

Currently, $$ supports base type variables, as well as variables for @ State, @ Link, and @ Prop decorations.
Currently, $$ only supports rendering between the show parameter of the bindPopup property and the @ State variable, and the checked property of the Radio component.
When the variable of the $$ binding is changed, only the current component is rendered to improve the rendering speed.

@Entry
@Component
struct bindPopup {
  @State customPopup: boolean = false
  build() {
    Column() {
      Button(){
        Text('Popup')
      }
      .onClick(()=>{
        this.customPopup = !this.customPopup
      })
      .bindPopup(
        $$this.customPopup, {
        message: "showPopup"
      }
      )
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

3 -> Customize the initialization methods and constraints of component member variables

A component's member variables can be initialized in two ways:

Local initialization:

@State counter: Counter = new Counter()
Enter fullscreen mode Exit fullscreen mode

Initialize by construction parameters when constructing a component:

MyComponent({counter: $myCounter})
Enter fullscreen mode Exit fullscreen mode

Image description

As you can see from the table above:

@ State variables need to be initialized locally, and the initialized values can be overridden by the construction parameters.

@ Prop and @ Link variables must be initialized and only by constructor parameters.

To initialize a member variable using the constructor method, you need to follow the following rules:

Image description

As you can see from the table above:

Parent Component regular variables can be used to initialize @State variables of child components, but not to initialize @link or @prop variables.

The @State variables of a parent component can initialize the @prop, @link (via $), or regular variables of the child component, but not the @State variables of the child component.

The @link variable of the parent component can initialize the @link or regular variable of the child component. However, initializing the @State members of a subassembly is a syntax error, and it is not recommended to initialize @prop.

The @prop variable of a parent component can initialize the regular or @prop variables of a child component, but cannot initialize the @State or @link variables of a child component.

@StorageLink and @StorageProp are not allowed to be passed from the parent component to the child component.

In addition to the above rules, the strong typing rules of TS need to be followed.

Top comments (0)