親子が別の引数を渡したときに、ひらめき子コンポーネントが再レンダリングされない

Question

もっと明示的には、子コンポーネントは、親コンポーネントが渡す引数に依存するプロパティを作成します。 子テンプレートで直接親引数を使用していません（この場合は問題ありません）。

私の精神モデルは、コンポーネントに渡された新しい引数が再レンダリングを引き起こすことを示唆しています。しかし、私は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; 
    } 
}; 

親は、ボタンのクリックごとに倍増数が表示されます。しかし、子供は決して再レンダリングしない？

私の質問は常にtrackedという変数をテンプレート内に持つ必要があることです。この場合はnumberです。そして、このここ

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

doubleのような子テンプレートを表現する数が2倍ヘルパーです。

テンプレートにtrackedプロパティ/引数を持つ理由は何ですか？

Answer 1

その出力はargs特性に依存するので、あなたのdoubleOfParent()方法は@tracked注釈が欠落しているように見えます：

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

でこのトピックに関する詳細な情報を見つけることができます