update component doc

doc/component.md

@@ -7,16 +7,8 @@ For example:
 
 ```javascript
 export class Counter extends Component {
-  inlineTemplate = `
-    <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>`;
-
-  state = {
-    counter: 0
-  };
+  template = "counter";
+  state = { counter: 0 };
 
   constructor(parent, props) {
     super(parent, props);
@@ -28,3 +20,90 @@ export class Counter extends Component {
   }
 }
 ```
+
+```xml
+    <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](#constructor)**
+- **[willStart](#willStart)**
+- **[mounted](#mounted)**
+- **[willPatch](#willPatch)**
+- **[updated](#updated)**
+- **[willUnmount](#willUnmount)**
+- **[destroyed](#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.