Реакция: это правда, что реакция завершает все обновления в течение одного цикла перекомпоновки

Question

Во всех презентациях я слышал, что React может обновлять DOM в течение одного цикла перекомпоновки, но я не могу понять, как это можно завершить с использованием DOM API.Что я имею в виду.Например, мне нужно обновить 3 атрибута для тега p .Я бы завершил это через 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';

вызывает только одну перекомпоновку.Объяснение довольно длинное, к счастью 2мн из этого выступления Джейка Арчибальда прекрасно объясняют это.

По сути, четыре строки кода вызывают только действия в памяти, то есть переменные меняются, и это тольков конце задачи (после четвертой строки) этот css фактически пересчитывается, и элемент перерисовывается, и окно перерисовывается.Итак, только один reflow .

React, ну, делает то же самое, так что только один reflow тоже.