Page Lifecycle

Similar to React, Yida's custom pages also provide page lifecycle capabilities, but simplified to only support the following two lifecycles. Users can write corresponding JS logic in the action panel to perform processing when the page mounts or unmounts:

• didMount - Similar to React's componentDidMount, will be called after the page is rendered for the first time;
• willUnmount - Similar to React's componentWillUnmount, will be called before the page is unmounted;

Usage Scenarios

Below is a simple example showing the specific usage of lifecycles. We configure page lifecycle functions in the action panel to perform the following operations:

• Listen for the document's resize event after the page mounts;
• Output the current page width in real-time through the onResize method;
• Remove the document's resize event listener before the page unmounts;

The related code is as follows:

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