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

Question

我试图找出为什么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挂钩之前执行。因此，标记在创建地图之前尝试引用它。我通过在组件init代码中添加console.log来解决这个问题。我找不到很多关于组件生命周期的文档。didInsertElement确实在API文档这里中被引用，但是最新的API文档实际上已经过时了，并且没有引用一堆描述了这里的钩子。后一个链接指出，生命周期事件按以下顺序发生：

didInitAttrs
didReceiveAttrs
willRender
didInsertElement
didRender

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

所以，我的问题是：

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

我在一个余烬在这里中重新创建了这个词条。子钩子在父钩子挂钩之前被调用，这会导致组件中断，因为在调用钩子时map是未定义的。这种情况发生在Ember 1.13.8和1.13.9上。

Answer 1

为什么在组件上使用didInsertElement时，钩子会按照它们的顺序执行呢？(孩子，然后是父母)

在1.8版中对此进行了更改。它以前是父母，然后是孩子，但这往往要求人们使用一些复杂的方法，等待孩子们去做某些事情。改变顺序使学习更简单。

有关详细信息，请参阅https://github.com/emberjs/ember.js/issues/5631。

这个组件是如何以当前编写的方式工作的？

我没有使用这句话，也不知道它是否行得通。我把你的手环修好了，不过：http://ember-twiddle.com/4c3e55d0a66ead378bdf

如果官方API文档中没有提到上述钩子，我应该使用它们吗？

没有提到这些钩子，因为文档仍然在追赶Ember中的变化。如果你愿意的话可以随意使用。