组件生命周期

Question

我试图理解成员表单(https://github.com/martndemus/ember-form-for/blob/master/addon/components/form-field.js#L64)中的问题，但是IMHO的代码并不那么重要，它只是一个普通的组件。

当重新呈现不发生时，组件工作得很好。在init()中，我们将设置(this、'name‘、'value')并按预期工作。但是在重新呈现之后，init()不会按预期调用(https://guides.emberjs.com/v3.0.0/components/the-component-lifecycle/)，对象具有与呈现前相同的标识符，但是init()中设置的值将丢失。我不明白为什么。

Answer 1

​

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

​

问题是实例变量不是一个好的解决方案。inputClasses (和其他)也用作组件的属性。这意味着在重呈现之后，它们将被原始值覆盖(并且不使用.concat )。我知道有两种解决方案：

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

Answer 2

在余烬指南中，我们了解到有一个生命周期钩子也将在rerender上被调用，即didReceiveAttrs钩子。

因此，使用此方法，组件将相应地将状态更改为已更改的属性。