React Reconciler: как написать собственный рендерер – HolyJS 2020 Moscow

React – удивительно универсальная технология, прочно вошедшая в нашу жизнь. Применение React уже давно вышло за пределы веба, его используют в огромном множестве задач: от разработки мобильных приложений и до генерации макетов. Интересно ли Вам, как такое стало возможно?

В ходе доклада мы разберем, что такое React Reconciler и как с его помощью создаются рендеры, напишем мини-версию привычного React DOM и увидим, как можно связать React с более экзотичными средами на примере отрисовки React-компонентов в Figma.

Доклад окажется полезным практикующим разработчикам и прольет свет на внутреннее устройство архитектуры React и React DOM.

Слайды

Примеры

React DOM mini

Пример создания собственного рендера из React в DOM, является минимальной версией React DOM.

Чтобы запустить:

1. cd react-dom-mini && npm i
2. npm start

Файловая структура:

• src/examples/ – примеры кода, порождающего вызовы тех или иных методов реконсилятора (например, добавление узла)
• src/renderer.ts – содержит реализацию хост-конфига

React Figma

Отрисовщик React-компонентов в Figma, файловая структура аналогична предыдущему примеру.

Для запуска:

1. Установить Figma

2. cd react-figma && npm i

3. npm start

4. Добавить плагин вв Figma:

   1. Создать новый документ
   2. Plugins -> Development -> New plugin...
   3. Нажмите Link existing plugin и укажите путь к src/manifest.json

5. Запустите:

   Plugins -> Development -> [HolyJS] React Renderer

Ссылки

Со слайдов

• React Figma
• Пакет react-reconciler
• Figma Plugin API
• Figma to code
• Overlay
• Зар Захаров, Александр Каменяр — Figma to React: доставка дизайна в код
• Илья Лесик – Как создать мультиплатформенную дизайн-систему на React

Создание рендеров

• Хост-конфиг React DOM
• Atul R – Beginners guide to Custom React Renderers
• Manas Jayanth – Learn how React Reconciler package works by building your own lightweight React DOM
• Sophie Alpert – Building a Custom React Renderer
• Aziz Khambati – Building an Async React Renderer with Diffing in Web Worker

Про архитектуру React

• React Docs: Reconciliation
• React Docs: Components, Elements and Instances
• Lin Clark – A Cartoon Intro to Fiber – React Conf 2017
• Maxim Koretskyi – Inside Fiber: in-depth overview of the new reconciliation algorithm in React
• Maxim Koretskyi – The how and why on React’s usage of linked list in Fiber to walk the component’s tree
• Rodrigo Pombo – Building your own React

Еще

• Awesome React Renderer list
• Предыдущий доклад на аналогичную тему