Мой случай: у меня есть предварительный загрузчик страницы, но он заставляет использовать реакцию и это слишком долго (первая краска). SSR может решить эту проблему, но это слишком сложно (я имею в виду решение этой проблемы с помощью полного SSR).
Я хочу использовать что-то вроде React.hydrate, но для одного единственного компонента. У меня есть компонент <MyCustomPreloader />, который отображает <div class="loader" />, но он отображается с большой задержкой (после загрузки страницы).
Моя идея: например, внутри index.html я могу сделать <div class="loader" />, который будет будет видна сначала краска. Основная проблема: <MyCustomPreloader />, что у меня уже отрисовано div, и он должен использовать его, не создавая новых.
Я мог бы найти необходимый DOM внутри компонента и работать с ним, но это означает отказ от React и продолжение работы непосредственно с компонентом DOM.
Я пытался вручную добавить <div class="loader" /> в <div id="root"></div> и использовать React.hydrate вместо React.render и , это работает! Но React.hydrate пытается гидратировать все компоненты до и после загрузчика, и это решение - kludge.
Я считаю, что есть функция, которая может частично гидратировать отдельный компонент (скажем, компоненту "используйте этот DOM" вместо создания такого же нового элемента), но я не могу его найти.
Например:
const loader = ReactDOM.someMagicFunction(<MyCustomPreloader />, document.getElementById("loader"))
Пример этого кладжа: https://codesandbox.io/s/hopeful-meadow-qgz6j Описание: у меня есть «предварительно обработанный» загрузчик в index.html, и я реагирую после того, как долгая загрузка получает его и ИСПОЛЬЗУЕТ (этот элемент DOM).
Могу ли я гидратировать отдельный компонент с помощью какого-либо элемента DOM?