Основные моменты части — V

  • React — это среда Javascript, поэтому виртуальный DOM React создается с помощью методов javascript. Этот метод называется React.createElement.
  • Когда вы регистрируете в консоли любой элемент, созданный React.createElement, вы получаете объект JS с ключами:
  • type: элемент какого типа мы хотим создать в реальном DOM — h1,p, div и т. д.
  • реквизиты: данные и дочерние элементы, необходимые для создания реального DOM — текст, вложенный элемент и т. д.
  • Мы можем использовать данные и применять логику, используя javascript

Можно ли писать React.createElement()?

Когда вы пишете React.createElement каждый раз, когда хотите реагировать на элемент, это как подливать масла в огонь. Скажем, нам нужно перечислить все районы во всех штатах. Мы добавим тег «li» для отображения таких районов, как

<ul>
<li>Thanjavur</li>
<li>Trichy</li>
</ul>

Варианты

  1. Нам нужно жестко запрограммировать его вручную для всех состояний.
  2. Мы можем использовать логику JS с входными данными
  3. Мы можем жестко закодировать React.createElement для создания реагирующих элементов, а затем передать их в виртуальный DOM.

Второй и третий вариант одинаковы. На самом деле третий вариант требует больше времени, чем второй. Но нам придется развивать стратегию из третьего варианта. Здесь стратегия будет заключаться в поиске общего шаблона в приведенном выше сценарии.

Позвольте мне повторить сценарий,

Нам нужно отобразить все районы, используя тег списка для каждого штата.

Здесь меняются данные (т. е. районы), но пользовательский интерфейс остается прежним.

Нам нужно будет настроить React.createElement, например систему ввода и вывода, в то время как вывод будет одним и тем же пользовательским интерфейсом с входными данными.

Эта система, которая принимает данные и обрабатывает их и вписывается в один и тот же пользовательский интерфейс, называется React Component.

Мы можем передать данные любого штата в эту систему, и на выходе будет список районов с одинаковым пользовательским интерфейсом (т.е. ‹li›).

Эту систему можно создать с помощью Функций и Классов в javascript. Название системы называется React Component. Компоненты, основанные на функциях, — это будущее, и основная команда React уделяет им больше внимания.

Компоненты React — это простые функции JavaScript, которые возвращают элементы реакции (например, простые объекты js)

Подведение итогов

  • Обновление фактического DOM с помощью манипулятора DOM (JS) неэффективно.
  • Repaint и Reflow — это два процесса при обновлении фактического DOM.
  • React решает проблему, добавляя еще один слой перед фактическим DOM. Этот слой называется Virtual DOM.
  • Виртуальный DOM — это копия фактического DOM без привязки к экрану (т. е. не будет отражать экран).
  • Всякий раз, когда происходит обновление, React создает новый виртуальный DOM.
  • Затем новый виртуальный DOM и старый сравниваются, чтобы найти, что изменилось/обновлено. Этот процесс называется Разница.
  • Все, что изменено, отправляется в очередь. Затем это пакетно обновляется в реальном/фактическом DOM. Это пакетное обновление упрощает весь процесс. Таким образом, React делает процесс проще и эффективнее, а не ускоряет процесс в целом
  • С точки зрения JS этот виртуальный DOM представляет собой простой объект с ключами — type, key, ref, props, _owner, _store.
  • Ключ ‘ props’ имеет вложенные ключи ‘ id’ и ‘ children’. Это основа создания вложенных элементов в React (отношения родитель-потомок).
  • Этот объект создается с помощью React.createElement(). Этот объект JS называется элемент React.
  • Нам нужна возможность повторного использования в коде, и, следовательно, использование/написание React.createElement утомительно и не подлежит повторному использованию. Это эволюционирует в концепцию компонента React.
  • Компонент React позволяет повторно использовать код реакции. Компонент может быть создан функцией и классом в Javascript.
  • Компоненты React, созданные функциями, продвигаются вперед и продвигаются командой React.
  • Поэтому компоненты React — это простые функции javascript, которые возвращают элемент React (т. е. объект JS с ключом — type, key, ref, props, _owner, _store)

Первоначально опубликовано на https://www.pansofarjun.com 19 марта 2022 г.