mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
Samuel Degueldre
4c77132ae2
Previously, components would automatically call useState on their props, so that changes deeply within props would automatically cause the component to be rendered. This can be useful when passing a piece of state to children or descendants. One problem with this is that all props implicitly become reactive, even if the object that was passed as a props was not. The problem with that being that since the original object is not reactive, any change made by the parent will not go through the reactivity system and the children won't be notified of the change, in essence, this reactive object is essentially useless, while having a real cost: traversing reactive objects creates more reactive objects, and those objects are all proxies. This is expensive for basically no benefit, while also making it more difficult to debug code that involves those objects. This commit fixes that by only calling useState on objects that are already reactive, allowing the usecase described in the first paragraph without the drawbacks described in the second.
140 lines
4.2 KiB
Plaintext
140 lines
4.2 KiB
Plaintext
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
|
|
exports[`reactivity in lifecycle Child component doesn't render when state they depend on changes but their parent is about to unmount them 1`] = `
|
|
"function anonymous(bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let b2;
|
|
if (ctx['state'].renderChild) {
|
|
b2 = component(\`Child\`, {state: ctx['state']}, key + \`__1\`, node, ctx);
|
|
}
|
|
return multi([b2]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`reactivity in lifecycle Child component doesn't render when state they depend on changes but their parent is about to unmount them 2`] = `
|
|
"function anonymous(bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return text(ctx['props'].state.content.a);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`reactivity in lifecycle Component is automatically subscribed to reactive object received as prop 1`] = `
|
|
"function anonymous(bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
return component(\`Child\`, {obj: ctx['obj'], reactiveObj: ctx['reactiveObj']}, key + \`__1\`, node, ctx);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`reactivity in lifecycle Component is automatically subscribed to reactive object received as prop 2`] = `
|
|
"function anonymous(bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
const b2 = text(ctx['props'].obj.a);
|
|
const b3 = text(ctx['props'].reactiveObj.b);
|
|
return multi([b2, b3]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`reactivity in lifecycle can use a state hook 1`] = `
|
|
"function anonymous(bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let txt1 = ctx['counter'].value;
|
|
return block1([txt1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`reactivity in lifecycle can use a state hook 2 1`] = `
|
|
"function anonymous(bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let txt1 = ctx['state'].a;
|
|
return block1([txt1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`reactivity in lifecycle can use a state hook on Map 1`] = `
|
|
"function anonymous(bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let txt1 = ctx['counter'].get('value');
|
|
return block1([txt1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`reactivity in lifecycle change state while mounting component 1`] = `
|
|
"function anonymous(bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let txt1 = ctx['state'].val;
|
|
return block1([txt1]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`reactivity in lifecycle state changes in willUnmount do not trigger rerender 1`] = `
|
|
"function anonymous(bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let b2;
|
|
if (ctx['state'].flag) {
|
|
b2 = component(\`Child\`, {val: ctx['state'].val}, key + \`__1\`, node, ctx);
|
|
}
|
|
return block1([], [b2]);
|
|
}
|
|
}"
|
|
`;
|
|
|
|
exports[`reactivity in lifecycle state changes in willUnmount do not trigger rerender 2`] = `
|
|
"function anonymous(bdom, helpers
|
|
) {
|
|
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
|
|
|
|
let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
|
|
|
|
return function template(ctx, node, key = \\"\\") {
|
|
let txt1 = ctx['props'].val;
|
|
let txt2 = ctx['state'].n;
|
|
return block1([txt1, txt2]);
|
|
}
|
|
}"
|
|
`;
|