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.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

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.

willUpdateProps

The willUpdateProps is an asynchronous hook, called just before new props are set. This is useful if the component needs some asynchronous task performed, depending on the props (for example, assuming that the props are some record Id, fetching the record data).

This hook is not called during the first render (but willStart is called and performs a similar job).

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

patched

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 patched.

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 patched. So, we need to be particularly careful at avoiding endless cycles.

willUnmount

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

This is the opposite method of mounted. The willUnmount method will be called in reverse order: first the children, then the parents.

3.5 KiB Raw Blame History