通达科技 - 宜兴电脑维护及IT服务外包服务商

Developers can create interactive and potent components in a variety of ways with the aid of OWL Components. The following are some significant methods for components and their life cycles:-

1. setup

After the construction of the component, the setup will run. The difference between the constructor and setup is that setup does not accept any argument. The hooks are called inside this method to make it possible to monkey patch.

setup() {
		useSetupAutofocus();
}

2. willStart

Before the initial rendering of the component, the willStart hook is called to perform some actions. It is useful in some cases to load external assets before the component rendering.

setup() {
    		onWillStart(async () => {
      			this.data = await this.loadData()
    		});
 	 }

3. willRender

To execute code just before the component is rendered. We can use onWillRender hook.

setup() {
   		onWillRender(() => {
      			// do something
    		});
 	 }

4. Rendered

In some cases, we need to execute the code just after the component is rendered. In such cases, we can use the onRender hook.

setup() {
    onRendered(() => {
      // do something
    });
  	}

5. mounted

After the initial rendering, each time component is attached to DOM, the mounted is called. Only this hook is called when the component is present in the UI.

setup() {
    onMounted(() => {
      // do something here
    });
  }

6. willUpdateProps

It is an asynchronous hook. This hook is called when an update is made for the related component. This function will be useful if a component has an asynchronous task that needs to be completed. At this time, the function will be registered using this hook.

setup() {
    onWillUpdateProps(nextProps => {
      return this.loadData({id: nextProps.id});
    });
  }

7. willPatch

Before the DOM patching starts, willPatch is triggered. We can use it for reading information from the DOM. On the initial render, it is not called, and modifying the state is not allowed. This hook is used to register the function at this moment.

setup() {
    onWillPatch(() => {
      this.scrollState = this.getScrollSTate();
    });
  }

8.patched

Patched hook is called when a component updates its DOM. It is not called from the initial render. This method is useful to interact with the DOM whenever the component is patched. At this moment, onPatched hook is used to register.

setup() {
    onPatched(() => {
      this.scrollState = this.getScrollSTate();
    });
  }

9. willUnmount

Before the component is unmounted from DOM, the willUnmount method is called.

setup() {
    onMounted(() => {
      // add some listener
    });
    onWillUnmount(() => {
      // remove listener
    });
  }

10. willDestroy

When components are inactive, we need to clean some actions where actions are done on setup.

setup() {
    onWillDestroy(() => {
      // do some cleanup
    });
  }