Уместно ли определять некоторые UI элементы не путём отслеживания их

Question

Уместно ли определять некоторые UI элементы не путём отслеживания их

состояния в локальном стейте/сторе, а взаимодействуя с DOM? Вот пример: есть древовидная структура папок. Если в какой-либо дочерней папке (на любом уровне иерархии в дереве) имеется файл, то надо отображать индикатор, что папка не пустая у самой папки и у её родителей по цепочке, вплоть до корневого элемента. В нативном JS это можно сделать очень просто с помощью навешивания доп. классов, а дальше квери селектором смотреть имеющийся класс у потомка и навешивать всё эт дело заново, если файл удалили, или добавили в другой директории, НО в реакте же вся фишка в том, что ты должен работать с состояниями, а тут это не совсем удобно становится, т.к. при каждом удалении/добавлении файлов надо мурыжить массив заново, а т.к. это дерево, то без рекурсии при переборах никак не обойтись и отсюда вытекает вопрос: можно ли в реакте обращаться к DOM элементам напрямую, меняя отображение UI минуя стейт/стор, И насколько это вообще оправдано (просто не совсем понимаю, какая операция выходит более ресурсоёмкой: рекурсивная обработка массива с вложенностями или операции с DOM-деревом).

#frontend #javascript #programming #react.js #russian

0

08.11.2020

13 ответов

1 просмотр

Lastiqe Adadurov Автор вопроса

Тимофей 🛴
Нет нельзя, скорее всего если хорошо подумать твою...

Да задача уже решена, я уже всё отобразил, а все "лампочки" хранятся в сторе. Просто задумался, мб как-то можно "удешевить" отображение UI не путём перебора этого массива, а повесить всю работу на браузер и пущай он в DOM дереве там роется и выдает всю вложенность с нужными мне путями до дочерних папок. Штош, увы(

0

08.11.2020

Ivan 🧑‍🚀

Правильно написанная рекурсивная работа с деревом эффективнее, чем троганье за DOM. Ну и нельзя трогать DOM там, где работает реакт. Если уверен в себе и хочешь написать супер-оптимально, можешь сам рендерить и управлять домом, не создавая компонент реакта

0

08.11.2020

Ivan 🧑‍🚀

Lastiqe Adadurov
Да задача уже решена, я уже всё отобразил, а все "...

Не он роется, а ты. И ты это делать будешь менее эффективно, чем реакт

0

08.11.2020

Ivan 🧑‍🚀

Lastiqe Adadurov
Да задача уже решена, я уже всё отобразил, а все "...

В среднем эффективная работа с DOM дороже по ресурсам, чем числодробилка (какой является рекурсивный перебор дерева)

0

08.11.2020

Lastiqe Adadurov Автор вопроса

Ivan 🧑‍🚀
Правильно написанная рекурсивная работа с деревом ...

Не, такой вариант точно не подходит) Ну в целом я так и думал, что рыться в ДОМе не ставя в известность Реакт, в реакт-приложении - плохая идея.

0

08.11.2020

Lastiqe Adadurov Автор вопроса

Ivan 🧑‍🚀
В среднем эффективная работа с DOM дороже по ресур...

А что ты имел под правильно написанной? Я вот к примеру обычной рекурсивной функой и .map() методом внутри неё массив перебираю. Это сильно неэффективно?

0

08.11.2020

Ivan 🧑‍🚀

Lastiqe Adadurov
А что ты имел под правильно написанной? Я вот к пр...

Смотреть надо. Я про разумное использование мемоизации и вызовов setState во избежание лишних рендеров

0

08.11.2020

Lastiqe Adadurov Автор вопроса

Ivan 🧑‍🚀
Смотреть надо. Я про разумное использование мемоиз...

А, ну тогда всё ок)

0

08.11.2020

Dmitriy Shuleshov

Реакт и создан что б не заморачиваться, теоретически можно с дом отработать эффективней чем реакт, но это неудобно и зачастую не нужно. (Явно не для того что дерево каталогов нарисовать, это тривиал)

0

08.11.2020

Lastiqe Adadurov Автор вопроса

Dmitriy Shuleshov
Реакт и создан что б не заморачиваться, теоретичес...

Да дело не в отрисовке и сложности. Я спрашивал про то, что менее ресурсоёмко && уместно при использовании реакта. Вариант с обращением к ДОМу неуместен, если компонент рендерится реактом, так что остается делать через реакт и состояния (собсна через него изначально и сделано)

0

08.11.2020

Dmitriy Shuleshov

Lastiqe Adadurov
Да дело не в отрисовке и сложности. Я спрашивал пр...

Я ответил на вопрос что менее ресурсоемко

0

08.11.2020

Lastiqe Adadurov Автор вопроса

Dmitriy Shuleshov
Я ответил на вопрос что менее ресурсоемко

На этот вопрос уже выше ответили, что рекурсивный перебор массива эффективней любого ковыряния в ДОМе.

0

08.11.2020