Page Lifecycle - DingTalk Help Center

Like React, YiDA custom pages also provide page lifecycle capabilities. The implementation is simplified and supports only the following two lifecycle hooks. Write the corresponding JS logic in the action panel to run tasks when the page mounts or unmounts:

didMount — Equivalent to React’s componentDidMount. Called after the page renders for the first time.
willUnmount — Equivalent to React’s componentWillUnmount. Called before the page unmounts.

Use Cases

The following example demonstrates how to use lifecycle hooks. Configure the page lifecycle functions in the action panel to perform these operations:

Listen for the document’s resize event after the page mounts.
Output the current page width in real time via the onResize method.
Remove the document’s resize event listener before the page unmounts.

See the related code below:

export function didMount() {
  console.log(`「Page JS」: Current page URL ${location.href}`);

  window.addEventListener('resize', this.onResize);
}

export function willUnmount() {
  window.removeEventListener('resize', this.onResize);

}

export function onResize() {
  const width = document.documentElement.clientWidth;
  console.log(`current width: ${width}`);
}

Notes