Question

我试图理解ember-form-for（https://github.com/martndemus/ember-form-for/blob/master/addon/components/form-field.js#L64）中的问题，但恕我直言，代码并不重要，它只是一个普通的组件。

当不重新渲染时，该组件可以正常工作。在 init（）中，我们将设置（此，＆＃39;名称＆＃39;，＆＃39;值＆＃39;），它按预期工作。但是在重新渲染之后， init（）未按预期调用（https://guides.emberjs.com/v3.0.0/components/the-component-lifecycle/），该对象具有与渲染前相同的标识符，但是在 init中设置的值（）丢失了。我不明白为什么。

Answer 1

在ember guides中我们了解到有一个生命周期钩子也会被重新调用，didReceiveAttrs钩子。

因此，使用此方法，您的组件将根据更改的属性更改状态。

Answer 2

[
  'inputClasses',
  ...
].forEach((type) => {
  set(this, type, (get(this, type) || []).concat(get(this, `config.${type}`)));
});

问题是实例变量不是一个好的解决方案。 inputClasses （和其他）也用作组件的属性。这意味着重新渲染后它们会被原始值覆盖（并且不使用.concat）。我知道两个解决方案：

如果我们将内部变量的名称更改为与输入属性不匹配，我们就可以了。
很好的解决方案是使用计算属性。

组件生命周期

2 个答案: