组件生命周期

Question

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

当不发生重新渲染时，该组件可以完美运行。在 init() 中，我们将执行 set(this, 'name', 'value') 并且它按预期工作。但在重新渲染后，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（和其他）也用作组件的属性。这意味着在 re-render 之后它们被原始值覆盖（并且不使用 .concat）。我知道两个解决方案：

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

组件生命周期

Component life-cycle

ember.js