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';

仅调用一次重排。解释相当冗长，幸运的是，杰克·阿奇博尔德（Jake Archibald）的演讲中有200分钟完美地解释了这一点。

基本上，这四行代码只触发内存中的动作，即变量被改变，只有在任务结束时（第四行之后）才真正重新计算 css，并重新渲染元素，重新绘制窗口。所以，只有一个回流。

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