当 parent 传递给它一个不同的参数时，Glimmer child 组件不会 re-render

Question

更明确地说，child 组件创建一个属性，它依赖于 parent 组件传递的参数。 我没有在 child 模板中直接使用 parent 参数（这种情况下工作正常）。

来自 React 背景，我的心智模型表明传递给组件的新参数将触发 re-render。但我知道 Glimmer 用它的 @tracked 装饰器做了不同的事情。

好的，这是人为的例子。如需演示，请前往 Glimmer Playground.

// parent-template.hbs
<button onclick={{action doubleNumber}}>Double Number</button>
<div>
  Parent - {{number}}
</div>

<Child @number={{number}} />

// parent-component.ts
import Component, { tracked } from '@glimmer/component';

export default class extends Component {
  @tracked number = 2;

  doubleNumber() {
    this.number = this.number * 2;
  }
}

// child-template.ts
<div>
  Child will render double of parent {{doubleOfParent}}
</div>

// child-component.ts
import Component, { tracked } from "@glimmer/component";

export default class extends Component {
  args: {
    number: number;
  }

  get doubleOfParent () {
    return 2 * this.args.number;
  }
};

此处 parent 在每次单击按钮时显示双倍数字。但是 child 从来没有 re-renders?

我的问题是我们是否总是需要在模板中包含 tracked 变量。在这种情况下 number。并像这样表达child模板

<div>
  Child will render double of parent {{double @number}}
</div>

这里double是加倍数的助手

如果是这样，模板中包含 tracked properties/argument 的原因是什么？

Answer 1

您的 doubleOfParent() 方法似乎缺少 @tracked 注释，因为它的输出取决于 args 属性:

import Component, { tracked } from "@glimmer/component";

export default class extends Component {
  args: {
    number: number;
  }

  @tracked('args')
  get doubleOfParent() {
    return 2 * this.args.number;
  }
};

您可以在 https://glimmerjs.com/guides/tracked-properties

找到有关此主题的更多信息

当 parent 传递给它一个不同的参数时，Glimmer child 组件不会 re-render

Glimmer child component does not re-render when the parent passes it a different argument

glimmer.js