Давайте изучим React, создав React в пределах 100 строк кода.

В этом блоге мы создадим библиотеку, похожую на React, и поймем, как React работает внутри. Этот блог написан таким образом, что даже если вы не знаете, как реагировать или хотите изучить внутреннюю работу реакции, вы найдете его полезным.

Ссылка на репозиторий GitHub: https://github.com/git-kamesh/kReact

Подпишитесь на меня в Твиттере: @kamesh_koops

[REQ] Требования и варианты использования: что мы хотим построить? 🤔

  • [COMPONENT] Возможность разделения сложного пользовательского интерфейса на более мелкие повторно используемые компоненты (кнопка, раскрывающийся список, слайдер изображений и т. д.).
  • [JSX] Возможность написания шаблона HTML в самом JavaScript. Назовем это JSX.
  • [LOGIC] JSX должен позволять встраивать выражения JavaScript и логически управляться.
  • [PROPS] Возможность передавать данные/информацию компоненту извне, назовем это props.
  • [СОСТОЯНИЕ] Компонент может иметь свои собственные данные/информацию без передачи ему извне, назовем это state.
  • [RE-RENDER] При каждом изменении props или state изменения должны автоматически отражаться в пользовательском интерфейсе. Назовем это re-render.
  • [PREVENT] Должна иметь возможность явно предотвращать re-render всякий раз, когда это необходимо. (компонент должен обновляться)
  • [ЖИЗНЕННЫЙ ЦИКЛ] Знайте события жизненного цикла компонентов
  • [DOM-OPERATION] Должен сам обрабатывать операции DOM.
  • [DIFF] При повторном рендеринге следует найти разницу между старой DOM и новой виртуальной DOM и обновить только эту часть до DOM. Назовем это patch.

Давайте разбираться

  • Прежде чем прыгать, мы должны понять несколько вещей/понятий, таких как React, DOM, Virtual DOM, JSX, компоненты, состояние, транспилятор JSX, согласование.
  • Не знаю? не волнуйтесь, мы увидим это здесь.

Что такое Реакт? 👽

  • React — это библиотека пользовательского интерфейса на основе компонентов.
  • Компонент может быть чем угодно, например Button, DropDown, ImageSlider, PasswordInput и т. д.
  • Здесь компоненты являются строительными блоками пользовательского интерфейса и будут реагировать на изменение данных.
  • Компоненты допускают повторное использование, что обеспечивает скорость разработки, согласованность, разделение задач, простоту обслуживания и возможность модульного тестирования.
  • Также позволяет и то, и другое, создание всего приложения (или) части приложения/функции.

ДОМ

  • DOM означает объектную модель документа.
  • Это объектное представление проанализированного HTML-документа.
  • Мы могли бы обновить dom через DOM API (например: )
  • Когда объект DOM обновляется, браузер выполняет две ресурсоемкие операции.
  • Перекомпоновка — вычисляет размер и положение каждого элемента и его дочерних элементов.
  • Перекрасить — определяет визуальные изменения (например, цвет, непрозрачность, видимость) и применяет их.
  • Одним из важных преимуществ виртуального дома является то, что он помогает уменьшить нежелательную перекомпоновку и перерисовку, обновляя только измененную часть дома, а не обновляя весь дом.

Виртуальный дом

  • Виртуальный DOM — это не что иное, как легковесное представление объекта javascript в памяти фактического DOM.
  • Он имитирует настоящий DOM.

JSX 101

const element = <h1 className="clrR">Hello, world!</h1>;
  • Приведенный выше синтаксис тега не является ни строкой, ни HTML. Это JSX.
  • JSX означает JavaScript XML. Он используется для определения нашего виртуального DOM.
  • Точно так же, как HTML используется для создания реального DOM, JSX используется для создания виртуального DOM.
  • Проще говоря, JSX — это то, как React позволяет нам писать HTML на JavaScript.
  • JSX — это расширение синтаксиса для JavaScript, и это недопустимый JavaScript, веб-браузеры не могут читать его напрямую.
  • Таким образом, если файлы JavaScript содержат JSX, этот файл необходимо будет перенести. Это означает, что до того, как файл попадет в веб-браузер, компилятор JSX преобразует любой JSX в обычный JavaScript.
  • После компиляции выражения JSX становятся обычными вызовами функций JavaScript и оценивают объекты JavaScript.
  • Приведенный выше пример JSX будет скомпилирован аналогично приведенному ниже.
React.createElement('h1', { className: 'clrR'}, 'Hello, world!');

Примирение

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

Термины для понимания

  • Визуализация: процесс преобразования виртуального дома в дом.
  • Монтирование: процесс внедрения визуализированного домена в целевой дом.
  • Сравнение и исправление: процесс сравнения виртуального дома и реального дома, обновление измененных узлов.

Теории закончились, давайте поиграем с кодом 😍

Логика рендеринга

render(vnode, parent):
      IF vnode IS class component:
         CREATE NEW INSTANCE FOR component --> componentInstance
         GENERATE component VNODE BY INVOKING componentInstance.render() --> VNode
         RENDER VNODE BY PASSING VNODE INTO render FUNCTION --> DOMNode
     ELSE IF vnode IS function component:
         GENERATE VNODE BY EXECUTING vnode --> VNODE
         RENDER VNODE BY PASSING VNODE INTO render FUNCTION --> DOMNode
     ELSE IF vnode IS OBJECT:
         CONVERT vnode OBJECT INTO DOMNode
         RECURSIVELY APPLY render FUNCTION on vnode children
         ASSIGN PROPS AS DOMNode attributes 
         MOUNT DOMNode ON parent
     RETURN DOMNode

Исправление логики

patch(dom, vnode, parent):
     IF dom AND vnode DIFFED:
         RENDER vnode --> DOMNode
         REPLACE dom WITH DOMNode

Полный исходный код

Репозиторий GitHub: https://github.com/git-kamesh/



kamesh sethupathi — член технического персонала — Zoho | LinkedIn
Камеш Сетупати — разработчик полного цикла, дизайнер и технический энтузиаст. В настоящее время он работает в ZOHO в качестве…www.linkedin.com



Следите за мной в твиттере: @kamesh_koops

Ссылки и подобные статьи

- https://maksimivanov.com/posts/virtual-dom/
- https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060
- https://medium.com/@sweetpalma/gooact-react-in-160-lines-of-javascript-44e0742ad60f
- https://reactjs.org/docs/reconciliation .html
- https://www.youtube.com/watch?v=x7cQ3mrcKaY&t=742s&ab_channel=JSConf