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

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

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

document.querySelector("#animation")

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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