Component

Components are the reusable, composable widgets. They are designed to be low level, to be declarative, and with asynchronous rendering.

For example:

export class Counter extends Component {
  template = "counter";
  state = { counter: 0 };

  constructor(parent, props) {
    super(parent, props);
    this.state.counter = props.initialState || 0;
  }

  increment(delta) {
    this.updateState({ counter: this.state.counter + delta });
  }
}

    <div t-name="counter">
      <button t-on-click="increment(-1)">-</button>
      <span style="font-weight:bold">Value: <t t-esc="state.counter"/></span>
      <button t-on-click="increment(1)">+</button>
    </div>`;

Lifecycle

A solid and robust component system needs useful hooks/methods to help developers write components. Here is a description of the lifecycle of a owl component:

constructor
willStart
mounted
willPatch
updated
willUnmount
destroyed

Note: no hook method should ever be called manually. They are supposed to be called by the owl framework whenever it is required.

constructor

The constructor is not exactly a hook, it is the constructor of the component.

willStart

willStart is an asynchronous hook that can be implemented to perform some action before the initial rendering of a component.

It will be called exactly once before the initial rendering. It is useful in some cases, for example, to load external assets (such as a JS library) before the widget is rendered. Another use case is to load data from a server.

Note that a slow willStart method will slow down the rendering of the user interface. Therefore, some effort should be made to make this method as fast as possible.

mounted

mounted is a hook that is called each time a component is attached to the DOM. This is a good place to add some listeners, or to interact with the DOM, if the component needs to perform some measure for example.

It is the opposite of willUnmount. If a component has been mounted, it will be unmounted at some point.

willPatch

The willPatch hook is called just before the DOM patching process starts. It is not called on the initial render. This is useful to get some information which are in the DOM. For example, the current position of the scrollbar

Note that at this point, it is not safe to rerender the widget. In particular, updateState calls should be avoided.

updated

This hook is called whenever a component did actually update its props, state or env.

This method is not called on the initial render. It is useful to interact with the DOM (for example, through an external library) whenever the component was updated.

Updating the widget state in this hook is possible, but not encouraged. One need to be careful, because updates here will cause rerender, which in turn will cause other calls to updated. So, we need to be particularly careful at avoiding endless cycles.

willUnmount

willUnmount is a hook that is called each time a component is detached from the DOM. This is a good place to remove some listeners, for example.

This is the opposite method of mounted.

destroyed

destroyed is a hook called exactly once, when a component is destroyed. When a component is destroyed, its children will be destroyed first.

3.4 KiB Raw Blame History