Вопрос по коду связанного с DOM

[NeonMan]

Я понял, с помощью этой строчки

const canvasRoot = ReactDOM.findDOMNode(this.refs.canvasRoot);

Указываем на элемент из ДОМ для функции.
Но мне кажется такую строчку написать легче, не?

document.querySelector("#animation")

Или бывают случаи где подход через ref оправдан?

[Malleys]

А вот же работает и без React ref, выходит он не нужен?

Да, работает и не работает, как надо, вы не сможете использовать этот компонент более одного раза, поскольку document.querySelector("#app") указывает на один и тот же элемент.

document.querySelector("#app") ищет элемент, зачем вам его искать, когда вы его сами создаёте.

Чтобы это правильно работало вам нужно это компонент изолировать от остальной части DOM при помощи Shadow DOM API...

Я думаю, если вы решили использовать React.js, то нужно использовать все его возможности, а не только часть, а остальное пытаться изобрести заново. Да, ссылка на настоящий элемент может быть нужна, и такая возможность предоставляется!

[NeonMan]

А зачем компонент изолировать от основного DOM ?
Указывать на элемент через ref я то не против, просто хочется знать в чем разница. Тем более что в этом варианте каждый раз нужно подключать к компоненту => import ReactDOM from "react-dom";

[рони]

Malleys,
можно ли пример где document.querySelector("#app") не работает?

[Malleys]

Вот пример, где ещё не было React-а, тот самый мой первый пример https://codepen.io/Malleys/pen/XQNpXK

Тут класс DotAnimation может использоваться много раз, для каждого элемента свой селектор

new DotAnimation(document.getElementById("app"));
new DotAnimation(document.getElementById("app2"));

Если вы замените "app2" на "app", то второй не будет работать.

можно ли пример где document.querySelector("#app") не работает?

Так ещё один React элемент Home создайте... вот добавил второй к примеру с ref https://codesandbox.io/s/m7o21ym6pj работает, как ожидается

пример с document.querySelector("#app") https://codesandbox.io/s/rryjlyjrr4 работает, не так как ожидается

Обратите внимание, что сanvas вставлен не туда!

А зачем компонент изолировать от основного DOM ?

Именно для того, чтобы не происходило такого, что разные элементы разных компонент перепутаны.

Тем более что в этом варианте каждый раз нужно подключать к компоненту => import ReactDOM from "react-dom";

он импортируется только один раз, это ссылка на один и тот же ReactDOM

[рони]

Обратите внимание, что сanvas вставлен не туда!

спасибо, сам это не заметил.

[NeonMan]

Спасибо за подробный ответ

[рони]

есть ли на этом форуме ветка с React JS ?

на данный момент такого подразела нет, есть Библиотеки/Тулкиты/Фреймворки