Как итеративно рендерить дерево компонентов в react?
Как итеративно рендерить вложенные компоненты в react? как я понял рекурсия более затратна по производительности?
Уровней вложенности может быть неограниченное количество.
Проблема в том, что при вложенности более 5 уровней, приложение забивает процессор на 100% и зависает.
Пример дерева:
"comments": [ { "name": "1comment", "body": "1comment", "date": "2019-05-15T15:56:15.694116Z", "id": "0179ef41-fdb6-4700-a4dc-6d7bbc54385a", "parent": null, "reply": [] }, { "name": "2comment", "body": "2comment", "date": "2019-05-17T13:59:51.167188Z", "id": "1ef06878-58b5-48b0-9349-73986ab66bb4", "parent": null, "reply": [ { "name": "2-1-comment", "body": "2-1-comment", "date": "2019-05-21T22:32:44.998207Z", "id": "514aa634-08bd-4ca3-8a1a-eb10846808ed", "parent": "5a01211d-3ee9-4bf6-9a50-462a8277898a", "reply": [ { "name": "2-1-1-comment", "body": "2-1-1-comment", "date": "2019-05-21T22:32:44.998207Z", "id": "514aa634-08bd-4ca3-8a1a-eb10846808ed", "parent": "5a01231d-3119-4bf6-9a50-462a8277898a", "reply": [] } ] } ] }, { "name": "3comment", "body": "3comment", "date": "2019-05-19T12:07:15.613266Z", "id": "5a01231d-3ee9-4bf6-9a50-462a8277898a", "parent": null, "reply": [ { "name": "3-1-comment", "body": "3-1-comment", "date": "2019-05-21T22:32:44.998207Z", "id": "514aa634-08bd-4ca3-8a1a-eb10846808ed", "parent": "5a01231d-3ee9-4bf6-9a50-462a8277198a", "reply": [] } ] } ]
Ответы (1 шт):
Не в курсах, что там с реактом, но я с подобной проблемой столкнулся при рендеринге структуры dom на js. Вот такой штуки:
Алгоритм следующий:
- проходим циклом первый раз, строим корневые элементы, назначаем айди, если их нету или кривые.
- проходим циклом while, вытягивая из каждой "корневой строки" (№№ 3,5,7):
элементы каждого следующего уровня на каждой итерации и добавляем в соответствии с айди. До тех пор пока весь проход цикла будет без единого добавления.
Все. Никакой рекурсии. Кол-во уровней вложенности определяется по кол-ву "name" в строке или скобок в конце оной. Все это и вытягивание данных по каждому уровню делается обычными строковыми ф-циями. В худшем случае с регулярками.
opd:
Сложность только в правильном вычислении элемента на опред.уровне вложенности. Можно по парности/непарности скобок, но по айди проще (айди и парент-айди).
Можно преобразовать массив и "итератить" его. Так проще должно быть.
Красным - первая итерация, зеленым - вторая, синим - третья.