Ember.js中afterRender运行循环与didInsertElement钩子的区别及选择准则问询

作为常年跟Ember.js打交道的开发者，我来帮你理清楚这两个常用工具的核心差异，以及什么时候该选哪个：

核心区别 #

1. 所属范畴完全不同 #

• didInsertElement：这是组件专属的生命周期钩子，只有组件类才能定义这个方法，属于组件初始化生命周期的一环。
• afterRender：这是Ember运行循环（Run Loop）中的一个执行队列，任何代码都可以通过Ember.run.schedule('afterRender', this, () => { /* 你的逻辑 */ })的方式，把任务调度到这个队列执行，它不属于某个组件的生命周期，是全局运行循环的一部分。

2. 触发时机与覆盖范围不同 #

• didInsertElement：当当前组件的DOM元素被插入到页面DOM树中时立即触发。此时只有当前组件的DOM是就绪的，页面上的其他组件（比如父组件、兄弟组件）可能还没完成渲染，DOM状态并不完整。
• afterRender：在当前运行循环内所有渲染操作（包括所有组件的插入、DOM更新）全部完成后才会执行。此时整个页面的DOM状态是完全最新的，所有该渲染的内容都已经到位。

3. 执行次数差异 #

• didInsertElement：每个组件在首次插入DOM时只会执行一次，除非组件被销毁后重新创建，才会再次触发。
• afterRender：只要当前运行循环有渲染操作，所有被调度到这个队列的任务都会执行；如果多次调用schedule方法，对应的任务也会多次运行。

经验法则：该选哪个？ #

优先用didInsertElement的场景 #

• 你只需要操作当前组件自己的DOM元素：比如给组件内的输入框绑定第三方自动完成插件、获取组件内某个元素的宽高、初始化组件专属的DOM交互逻辑。此时用它更高效，不需要等待其他组件渲染，逻辑也更聚焦在组件内部。
• 组件初始化阶段需要基于自身DOM做一次性设置的场景。

优先用afterRender的场景 #

• 你需要操作其他组件的DOM元素，或者依赖整个页面的完整DOM状态：比如要获取父组件的容器尺寸、要等待兄弟组件渲染完成后再调整布局，或者需要在所有内容渲染完毕后做全局的DOM操作（比如滚动到页面指定位置）。
• 在某个事件触发了多组件渲染更新后，需要等所有渲染完成再执行后续逻辑：比如表单提交后刷新了多个列表组件，之后要自动滚动到最新添加的条目。

注意：别滥用afterRender！因为它会等待所有渲染完成才执行，频繁使用会增加页面的响应延迟，尤其是在复杂应用中，能用didInsertElement解决的就别用它。

内容的提问来源于stack exchange，提问作者shanky