mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[DOC] add information about reactivity
This commit is contained in:
committed by
Samuel Degueldre
parent
1ae9d514b9
commit
f405fe9323
@@ -31,6 +31,7 @@ All changes are documented here in no particular order.
|
|||||||
- breaking: Support for inline css (`css` tag and static `style`) has been removed ([details](#37-support-for-inline-css-css-tag-and-static-style-has-been-removed))
|
- breaking: Support for inline css (`css` tag and static `style`) has been removed ([details](#37-support-for-inline-css-css-tag-and-static-style-has-been-removed))
|
||||||
- new: prop validation system can now describe that additional props are allowed (with `*`) ([doc](doc/reference/props.md#props-validation))
|
- new: prop validation system can now describe that additional props are allowed (with `*`) ([doc](doc/reference/props.md#props-validation))
|
||||||
- breaking: prop validation system does not allow default prop on a mandatory (not optional) prop ([doc](doc/reference/props.md#props-validation))
|
- breaking: prop validation system does not allow default prop on a mandatory (not optional) prop ([doc](doc/reference/props.md#props-validation))
|
||||||
|
- breaking: rendering a component does not necessarily render child components ([details](#40-rendering-a-component-does-not-necessarily-render-child-components))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -799,3 +800,27 @@ seems like this should be done in user space, not at the framework level.
|
|||||||
|
|
||||||
Migration: code should just be adapted to either use another browser object,
|
Migration: code should just be adapted to either use another browser object,
|
||||||
or to use native browser function (and then, just mock them directly).
|
or to use native browser function (and then, just mock them directly).
|
||||||
|
|
||||||
|
## 40. Rendering a component does not necessarily render child components
|
||||||
|
|
||||||
|
Before, if one had the following component tree:
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
graph TD;
|
||||||
|
A-->B;
|
||||||
|
A-->C;
|
||||||
|
```
|
||||||
|
|
||||||
|
when `A` would render, it would also render `B` and `C`. Now, in Owl 2, it will
|
||||||
|
(shallow) compare the before and after props, and `B` or `C` will only be rerendered
|
||||||
|
if their props have changed.
|
||||||
|
|
||||||
|
Now, the question is what happens if the props have changed, but in a deeper way?
|
||||||
|
In that case, Owl will know, because each props are now reactive. So, if some
|
||||||
|
inner value read by `B` was changed, then only `B` will be updated.
|
||||||
|
|
||||||
|
Rationale: This was just not possible in Owl 1, but it now possible. This is
|
||||||
|
due to the rewriteof the underlying rendering engine and the reactivity
|
||||||
|
system. The goal is to have a big performance boost in large screen with many
|
||||||
|
components: now Owl only rerender what is strictly useful.
|
||||||
|
|
||||||
|
|||||||
@@ -68,12 +68,16 @@ The `Component` class has a very small API.
|
|||||||
component will go through the following lifecycle methods: `willUpdateProps`,
|
component will go through the following lifecycle methods: `willUpdateProps`,
|
||||||
`willPatch` and `patched`.
|
`willPatch` and `patched`.
|
||||||
|
|
||||||
* **`render()`**: calling this method directly will cause a rerender. Note
|
* **`render(deep[=false])`**: calling this method directly will cause a rerender. Note
|
||||||
that with the reactivity system, this should be rare to have to do it manually.
|
that with the reactivity system, this should be rare to have to do it manually.
|
||||||
Also, the rendering operation is asynchronous, so the DOM will only be updated
|
Also, the rendering operation is asynchronous, so the DOM will only be updated
|
||||||
slightly later (at the next animation frame, if no component delays the
|
slightly later (at the next animation frame, if no component delays the
|
||||||
rendering)
|
rendering)
|
||||||
|
|
||||||
|
By default, the render initiated by this method will stop at each child
|
||||||
|
component if their props are (shallow) equal. To force a render to update
|
||||||
|
all child components, one can use the optional `deep` argument.
|
||||||
|
|
||||||
## Static Properties
|
## Static Properties
|
||||||
|
|
||||||
- **`template (string)`**: this is the name of the template that
|
- **`template (string)`**: this is the name of the template that
|
||||||
|
|||||||
@@ -25,6 +25,11 @@ To solve this issue, Owl provides two reactivity primitives:
|
|||||||
|
|
||||||
Most of the time, the `useState` hook is the best solution.
|
Most of the time, the `useState` hook is the best solution.
|
||||||
|
|
||||||
|
Since version 2.0, Owl applies the fine grained reactivity at the component
|
||||||
|
level: props are automatically turned into reactive object, so Owl can track
|
||||||
|
which part of these props are consumed by each component, and is therefore able
|
||||||
|
to only rerender the impacted components.
|
||||||
|
|
||||||
## `useState`
|
## `useState`
|
||||||
|
|
||||||
Let us start by an example of how `useState` could be used:
|
Let us start by an example of how `useState` could be used:
|
||||||
|
|||||||
Reference in New Issue
Block a user