На какую модель DOM реагирует компонент рендеринга?реальный дом или витал-дом?

Question

Я прочитал много статей и считаю, что этот вопрос не является дублированным.

Согласно Какова роль функции render () внутри реагирующего компонента?

Функция render является частью жизненного цикла компонента реагирования, где ReactDOM является объектом класса, который предоставляет метод render, который используется для визуализации содержимого React JSX в вашей DOM.

иЯ также прочитал много статей, в которых объясняется, как работает реагирующая виртуальная dom, которая использует процесс diff перед рендерингом своего узла в real-dom.

Во всех статьях (по крайней мере, то, что я читал) упоминается, что render () отражает dom

Интересно, является ли это dom real-dom или virtual-dom

На самом деле у меня возникают некоторые проблемы с пониманием componentDidUpdate(), которое сразу же вызывается после render(), понимая мое непонимание функции render компонента

благодарю за помощь

Answer 1

реагируют, взаимодействуют с Virtual DOM. Чтобы применить обновления / изменения к реальному DOM, в игру вступает основная функция Virtual DOM, алгоритм согласования.Его задача - найти наиболее оптимизированное решение для устранения разницы между предыдущим и текущим состоянием Virtual DOM.А затем примените новый Virtual DOM к реальному DOM.

эта статья поможет вам глубже понять виртуальный DOM https://medium.com/@gethylgeorge/how-virtual-dom-and-diffing-works-in-react-6fc805f9f84e

Answer 2

componentDidUpdate - это последняя возможность реагировать на изменение реквизита в течение заданного цикла жизни реагирующего компонента.

Это последняя возможность, поскольку у нее есть доступ к prevProps .

и BTW сразу после рендеринга - getSnapshotBeforeUpdate(prevProps, prevState) вызывается и только тогда componentDidUpdate .

В соответствии с реакцией doc -

getSnapshotBeforeUpdate () вызывается непосредственно перед последним отображением выводастремится, например, DOM.Это позволяет вашему компоненту захватывать некоторую информацию из DOM (например, положение прокрутки) до того, как она потенциально может быть изменена.Любое значение, возвращаемое этим жизненным циклом, будет передано в качестве параметра componentDidUpdate ().

Поэтому я предполагаю, что метод render ссылается на реальный DOM.