Кастомный React рендерер

Когда React рендерит приложение и обновляет DOM, то используется React DOM. При рендере приложения на сервере используется модуль react-dom/server. Для мобильных приложений для рендера используется модуль react-native. 

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

Модуль react предоставляет API для определения компонентов, а реализация находится в “рендерерах”. Для связи хуков с реализацией используется объект “диспатчер”. При вызове useState, вызов перенаправляется текущему диспатчеру рендерера. Об этом есть подробная статья в блоге Дэна Абрамова.

Для разработки своего рендерера необходимо описать объект “host config”, в котором описаны методы реализации API React. Выглядит так:


const HostConfig = {
createInstance(type, props) {
// e.g. DOM renderer returns a DOM node
},
// ...
supportsMutation: true, // it works by mutating nodes
appendChild(parent, child) {
// e.g. DOM renderer would call .appendChild() here
},
// ...
};


https://github.com/facebook/react/blob/main/packages/react-reconciler/README.md

✍️ @React_lib