React：是的，React是否在一个回流周期内完成所有更新

Question

在所有演示中，我都听到了React可能会在一个重排周期内更新DOM的情况，但我无法理解使用DOM API如何完成它。我什么意思例如，我需要为 p 标签更新3个属性。我可以通过DOM API完成它：

let element = document.getElementById('el');
element.width = '10px';
element.height = '20px';
element.style.margin = '1px';

此代码调用重排3次。如果我理解正确，React也无法在一次重排中收集这些更新。我说的对吗？

Answer 1

首先，以下代码

let element = document.getElementById('el');
element.width = '10px';
element.height = '20px';
element.style.margin = '1px';

仅调用一次重排。该解释相当冗长，幸运的是2mn of this Jake Archibald's talk对此进行了完美解释。

基本上，四行代码仅触发内存中的操作，即变量被更改，并且仅在任务结束时（第四行之后）才真正重新计算css，并重新呈现元素，然后重新绘制窗口。因此，只有一个 reflow 。

反应很好，做同样的事情，所以也只有一个回流。