理解和使用 Ember 组件生命周期钩子

Question

我正在尝试找出 Ember 组件不工作的原因（并尝试了解过程中的组件生命周期）。有问题的组件是Ember-cli-mapbox。它使用嵌套组件。您可以拥有一个mapbox-map 组件，并且在该组件内您可以拥有多个mapbox-marker 组件。现在，它应该如何工作，是mapbox-map 组件初始化地图，然后将一个块传递给子标记组件。子标记组件然后引用传递给它们的地图。正在使用的组件示例（来自组件文档）：

{{#mapbox-map mapId='ember-cli-mapbox.7c3914f2' as |map|}}
  {{#each positions as |position|}}
    {{mapbox-marker map=map coordinates=position.coordinates}}
  {{/each}}
{{/mapbox-map}}

现在，使用didInsertElement 挂钩设置组件，这对我来说很有意义，因为在mapbox-map 组件可以绑定到DOM 中的元素之前，DOM 需要就位。但它不是那样工作的。子组件的didInsertElement 在父组件的didInsertElement 钩子之前执行。因此，标记尝试在创建地图之前引用它。我通过将console.logs 放在组件初始化代码中来解决这个问题。我找不到太多关于组件生命周期的文档。 didInsertElement 确实在 API 文档 here 中得到了引用，但似乎最新的 API 文档实际上已经过时，并且没有引用描述 here 的一堆其他钩子。后一个链接表示生命周期事件按以下顺序发生：

didInitAttrs
didReceiveAttrs
willRender
didInsertElement
didRender

现在，事情变得很奇怪。当我用didInitAttrs 替换组件中的didInsertElement 时，它会以正确的顺序触发。父组件上的didInitAttrs 挂钩首先触发，然后是子组件didInitAttrs 挂钩。问题是，DOM 还没有准备好，所以它没有多大帮助。我也不能将地图绑定事件放在 Ember 运行循环中，因为它需要返回并作为块传递给子元素。

所以，我的问题是：

1. 为什么，在组件上使用didInsertElement 时，钩子会按照它们的执行顺序执行吗？ （孩子，然后是父母）
2. 这个组件是如何按照目前的编写方式工作的？
3. 如果官方 API 文档中未提及上述钩子，我是否应该使用它们？

我在Ember Twiddle here 中重新创建了插件。子挂钩在父挂钩之前被调用，导致组件中断，因为在调用挂钩时 map 未定义。这发生在 Ember 1.13.8 和 1.13.9 上。

Answer 1

为什么，当在组件上使用 didInsertElement 时，钩子会得到 按照他们的顺序执行？ （孩子，然后是父母）

这在 1.8 版中已更改。以前是parent，然后是children，但这通常需要人们使用一些复杂的方法等待children渲染来做某些事情。更改顺序使学习 Ember 变得更简单。

更多信息请参见https://github.com/emberjs/ember.js/issues/5631。

这个组件是如何按照目前的编写方式工作的？

我没有使用过这个插件，不知道它是否有效。但是，我修复了您的旋转工作：http://ember-twiddle.com/4c3e55d0a66ead378bdf

如果不是，我应该使用上面提到的钩子吗？ 官方 API 文档中提到的？

这些钩子没有被提及，因为文档仍在追赶 Ember 的变化。如果您愿意，请随意使用它们。