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

Доклад повествует о том, что такое "реконсиляция" в React, какой путь проходит компонент от кода до отрисовки на экран и как написать свой собственный рендерер на примере отрисовки React-компонентов в Figma.

Слайды

Видео

Репозиторий содержит материалы доклада, исходный код демо и дополнительные материалы по теме.

Как запустить

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

2. Склонировать репозиторий

3. Перейти в папку с репозиторием и установить все зависимости, например, используя yarn

4. Запустить стартовый скрипт:

   yarn run start

   или

   npm run start

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

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

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

   Plugins -> Development -> Talk – Custom renderer

Дополнительные материалы

Архитектура 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

Написание рендерера

• React Reconciler package
• 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

Ссылки

• Awesome React Renderer list
• React Figma