afterRender vs didInsertElement

Question

ember.js中以下两件事之间的区别是什么？

当一个人优先于另一个时，是否有经验法则？

1）afterRender运行循环

2）didInsertElement勾

Answer 1

afterRender为您提供了一种方法，可以在完成所有先前计划的渲染任务后安排执行某些逻辑。 摘自Ember Run Loop文档。

$('a').click(() => {
  // Do something.. 
  Ember.run.schedule('afterRender', () => {
    // Do yet more things
  });
});

didInsertElement是一个只会被调用一次的组件钩子（与didReceiveAttrs不同），并为开发人员提供了添加额外逻辑的选项。
由于它仅在首次呈现组件元素时触发一次，因此它是附加事件侦听器的好地方。更多信息在Ember Component Lifecycle docs。

您可以从Ember.run.schedule部分here获取更多信息。您可以看到hook和afterRender如何一起使用以避免UI问题。

Answer 2

我总是喜欢didInsertElment钩子，如果我需要处理渲染的DOM元素。每当你想到使用afterRender run loop hack来解决你的问题时，那就是引入组件的最佳时机。

路由中没有钩子，要知道所有UI元素都在DOM中呈现，就像组件有didInsertElement和didRender钩子一样。

大多数afterRender运行循环黑客将在路由文件中使用，在所有UI渲染完成后运行一些逻辑。

您还可以在Ember Map的路线级视频中使用组件挂钩。 https://embermap.com/video/component-hooks-at-the-route-level