可以在调用`disconnectedCallback`之前多次调用自定义元素的`connectedCallback`吗? [英] Can a custom element's `connectedCallback` be called more than once before `disconnectedCallback` is called?
问题描述
规范说:
但是，请注意，connectedCallback可以被调用多次，因此，任何真正一次的初始化工作都需要采取防护措施，以防止其两次运行.
However, note that connectedCallback can be called more than once, so any initialization work that is truly one-time will need a guard to prevent it from running twice.
这是什么意思?难道是说 connectedCallback 在调用 disconnectedCallback 之前可以被调用多次(通过浏览器引擎)?
What does this mean? Is it saying that connectedCallback can be called more than one time (by the browser engine) before disconnectedCallback is ever called?
如果每个 disconnectedCallback 总是有一个 connectedCallback ，那么该语句就毫无意义.
If there is always one connectedCallback for every disconnectedCallback, then that statement is rather pointless.
我显然会清理在 disconnectedCallback 中的 connectedCallback 中创建的所有内容，因此不会出现运行两次"的情况.
I will obviously clean up whatever I create in connectedCallback in disconnectedCallback, thus I will not have things "running twice".
推荐答案
全部取决于您在回调中正在执行的操作以及可能合理预期的附加/分离事件数.如果它真的很复杂，并且您的节点可能在DOM中移动了很多，那么绝对值得考虑事件还是渲染.换句话说，事件循环注意事项.请看以下示例:
All depends on what you're doing in the callbacks, and how many attach/detach events you might reasonably expect. If it's really complex, and if your node might be moved around a lot in the DOM, then it's definitely worth considering events versus renders. In other words, event loop considerations. Take the following example:
var square = document.createElement('custom-square');
var one = document.getElementById('one');
var two = document.getElementById('two');
one.appendChild(square);
two.appendChild(square);
one.appendChild(square);
two.appendChild(square);
在此示例中，您将获得几个 connectedCallback 和几个 disconnectedCallback :每个 appendChild 都一个.但是，所有这些背对背的 appendChild 调用都在事件循环的同一周期中发生.
In this example you would get several connectedCallbacks and several disconnectedCallbacks: one for each appendChild. However all of these back-to-back appendChild calls are all happening in the same cycle of the event loop.
因此，当您获得四个单独的 connectedCallback 调用以及三个单独的 disconnectedCallback 调用时，该节点仅被渲染一次，并附加到 #two .
So while you get four separate connectedCallback calls and also three separate disconnectedCallback calls, the node is only rendered once, appended to #two.
这并不总是一个问题，但是由于大多数现代浏览器都尝试以60 FPS进行渲染，这意味着您每个渲染周期少于17ms即可完成所有JavaScript，和让浏览器针对给定的帧进行所有解析/流式处理/渲染.
This won't always be a concern, but since most modern browsers try to render at 60 FPS, that means you've got less than 17ms per render cycle to do all of your JavaScript, and for the browser to do all of its parsing/flowing/rendering for a given frame.
如果有问题，可以通过将适当的工作推迟到 requestAnimationFrame 回调中来进行防范，然后在将来有 connectedCallback 时取消该rAF.在下一个渲染事件之前发生，因为您可能只关心最后一个事件.
If it becomes a concern, you could guard against these sorts of things by deferring appropriate work to a requestAnimationFrame callback, and then cancel that rAF if you have future connectedCallback events before the next render event, since you probably only care about the very last one.
这篇关于可以在调用`disconnectedCallback`之前多次调用自定义元素的`connectedCallback`吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
