reactjs - react : is it true that react completes all updates within one cycle of reflow

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完美地解释了这一点。

基本上，这四行代码只是触发了内存中的 Action ，即变量发生了变化，只有在任务结束时(第四行之后)才真正重新计算css，重新渲染元素, 并重新粉刷了 window 。所以，只有一个回流。

React，嗯，做同样的事情，所以也只有一次回流。