Glimmer.js如何在不使用构造函数的情况下将跟踪的属性重置为初始值

问题描述

在Glimmer.js中,不使用构造函数将跟踪的属性重置为初始值的最佳方法是什么?

注意:无法使用构造函数,因为构造函数在初始页面渲染时仅被调用一次,而在随后的页面点击时不再被调用

解决方法

这个答案有两个部分,但是它们之间的共同主题是它们强调从命令式样式(在生命周期挂钩中明确设置值)切换为声明式样式(使用真正的单向数据流和/或使用修饰符来清楚地指示您要在哪里根据参数对本地状态进行某种转换)。

  1. 确定要这样做吗?很多时候人们认为他们这样做了,实际上他们应该只是重组数据流。例如,在Ember Classic中,很多时候,人们使用didInsertElementdidReceiveAttrs之类的钩子来获取“分叉”数据模式。在Glimmer组件(无论是在Ember Octane中还是在独立的Glimmer.js中)中,习惯于仅在数据所有者中管理更新是很习惯的: really 进行data-down-actions-ups。>

  2. 有时,在组件中创建跟踪数据的本地副本确实很有意义-例如,当您希望将来自API的数据与处理表单中数据的方式区分开来时(因为user interfaces are API boundaries!)。在这些情况下,tracked-toolbox@localCopy@trackedReset装饰器是很好的解决方案。

    • @localCopy大致按照其名称所示。它会创建通过参数传入的数据的本地副本,您可以通过操作在 local 中进行更改,但是如果参数值发生更改,它也将切换回参数。

    • @trackedReset创建一个局部状态,该局部状态在参数更新时重置。与@localCopy不同,状态是不是参数的副本,仅在参数更新时需要重置。

使用这两种方法中的任何一种,您最终都将获得比旧式Ember Classic方法更多的“声明式”数据流:“分叉”数据是通过装饰器完成的(方法2),而在大多数情况下,您不这样做根本不会分叉它,因为您只需将更改推回原始数据的所有者(1)。