Когда мы используем JSX <div></div> или React.createElement ("div", ...), это виртуальный DOM (элемент)? - PullRequest
Новая
       35

Когда мы используем JSX <div></div> или React.createElement ("div", ...), это виртуальный DOM (элемент)?

0 голосов
/ 11 февраля 2020

Когда мы используем JSX 

let el = <div></div>;

или 

let el = React.createElement('div', ...);

(они идентичны, AFAIK). Является ли el, или <div></div> виртуальным DOM (элементом), или виртуальный DOM означает что-то еще? Итак, мой вопрос на самом деле: <div></div> что станет частью виртуального DOM? React.createElement() создает объект. Станет ли этот объект частью виртуального DOM (дерева)?

Мне интересно, означает ли виртуальное DOM целое дерево или объектную модель виртуального документа для хранения всех элементов. Когда мы говорим ReactDOM.render(<Foo />, rootEl), он отображает виртуальные элементы DOM в виртуальное дерево DOM и фактическое дерево DOM. (Точно так же, как let el = document.createElement() создает фактический элемент DOM, а document.body.appendChild(el) добавляет элемент DOM в дерево DOM.) Так что <div></div> или React.createElement('div', ...) создает что-то, что станет частью виртуального DOM.

Ответы [ 2 ]

0 голосов
/ 11 февраля 2020

Когда вы используете React.createElement() †, вы создаете описание элемента для визуализации: 

> React.createElement('div', [], "Hello, world!");
{ '$$typeof': Symbol(react.element),
  type: 'div',
  key: null,
  ref: null,
  props: { children: 'Hello, world!' },
  _owner: null,
  _store: {} }

Каждый из этих элементов может, в свою очередь, отображать другие элементы, образуя дерево .

Когда вы передаете узел root ReactDOM.render() (и друзьям), ReactDOM превратит это описание элементов в первоначальный рендер и вставит его в DOM.

Когда в дереве происходит обновление, React будет повторно отображать всех его потомков (с некоторыми исключениями), и через процесс, называемый Согласование , React будет отличать новую версию от предыдущей версии, которую он представил , Затем React возьмет diff и применяет операции, необходимые для превращения старого состояния DOM в следующее желаемое состояние DOM.

Это хранилище в памяти представления текущего состояния DOM - это то, что мы имеем в виду, когда мы поговорим о «Виртуальном DOM».

Использование React.createElement() - это , а не , что я лично считаю Virtual DOM, поскольку он фактически не является частью модели Virtual DOM, пока не будет передан render() (либо непосредственно, либо будучи частью передаваемого дерева).

Вы можете найти информацию о расхождениях на странице Реакции для Согласование , и на странице есть более глубокое погружение о Оптимизация производительности .

Сноски:

† React.createElement('div', [], 'Hello, world!'); идентична <div>Hello, world!</div>. Ваш компилятор скомпилирует JSX в серию React.createElement вызовов.

0 голосов
/ 11 февраля 2020

Они одинаковые, но использование JSX более читабельно, когда у вас много элементов. Вот почему он называется syntacti c sugar, он помогает вам иметь более структурированный код, который вы можете легко прочитать.

...