Реагировать - манипулировать DOM или использовать состояние?
Это скорее «теоретический» вопрос, который часто ставит меня в тупик в разных ситуациях и вариантах использования, я приведу простой пример, чтобы продемонстрировать это.
Допустим, у меня есть список из 10 кнопок. Каждый раз, когда я нажимаю кнопку, поверх нажатой кнопки появляется плавающее меню - в любой момент времени видно только одно меню. Предположим, что я не могу отобразить это плавающее меню внутри компонента кнопки, и я могу отобразить его только на родительском уровне кнопок (это означает, что это меню родственно этим кнопкам).
У меня есть 2 возможных варианта сделать это:
- Сохраняйте позицию x, y последней нажатой кнопки и отображайте меню в этой заданной позиции.
- Отобразите меню один раз и используйте «ref», чтобы напрямую переместить меню.
С одной стороны, первый подход кажется более «реактивным». С другой стороны, возможная реализация, о которой я могу думать, довольно уродлива (захват позиции выбранного элемента и сохранение ее в состояние, которое запускает защитник), и, более того, я не так уверен в повторном рендеринге всего контейнера только потому, что я нужно переместить небольшой кусочек.
Второй подход затрагивает DOM напрямую, используя ссылки. Хотя это возможно, выполнение манипуляций с DOM иногда кажется мне неприятным.
Есть ли лучший подход? Какой из 2 имеет больше смысла?
Любое предложение или мысли будут оценены! Спасибо
Ответы 1
React использует так называемый виртуальный DOM, который является представлением DOM, расположенным поверх реального DOM браузера. Всякий раз, когда вы обновляете состояние или пользователь выполняет действие, виртуальный DOM сравнивает и проверяет изменения с реальным DOM, а затем соответствующим образом обновляет пользовательский интерфейс.
Таким образом, если определенные элементы DOM, такие как a, не отличаются между изменениями, они не отображаются повторно, повторно отображаются только измененные элементы DOM. И если свойство элемента DOM изменяется, обновляется только свойство, а элемент DOM не перерисовывается.
<div color = "blue" />
к
<div color = "red" />
Весь элемент не уничтожается и не создается заново, изменяется только свойство.
Однако, если элемент в дереве узлов отличается от всего дерева узлов, оно уничтожается и создается заново.
<div />
к
<p>
Это называется примирением https://reactjs.org/docs/reconciliation.html
Таким образом, использование refs, безусловно, является более хакерским решением, поскольку это больше похоже на аварийный люк и напрямую манипулирует DOM.
Я бы определенно придерживался варианта 1, я думаю, что есть элегантное решение для описанного вами варианта использования, оно будет включать в себя просто добавление прослушивателя событий щелчка в componentDidMount и отслеживание положения щелчка таким образом.
А также трудно сказать без кода, но поскольку ваши кнопки будут одинаковыми, они не будут перерисовываться, только меню.
Рекомендую для дальнейшего чтения https://overreacted.io/react-as-a-ui-runtime/