Как передавать данные в дереве компонентов React / Vue приложения?

Приложение описывает многоуровневую структуру, несколько уровней дерева компнентов. Данные хранятся-загружаются в виде похожего дерева.

Причем хранятся и известны при инициаизации приложения только id объектов, а полные данные для отображения асинхронно запрашиваются из стороннего API. Т.е. при открытии какого-то объекта сначала видны только id дочерних, а через пол-секунды подгружаются аватарки-названия.

Вижу два варианта передачи данных внутри:
  1. сверху-вниз через props передавать полные комплекты данных, хранить-обновлять их наверху
  2. либо передавать вниз только id, а каждый из низших компонентов сам запросит-получит полные даные.
Вопрос 1. Как лучше поступить с передачей данных для отображения: все через props сверху-вниз или независимость под-компонентов, каждый сам заправшивает-получает-отображает доп. данные?

Дерево редактируется в процессе работы. На каком-то из уровней добавляется элемент. Можно передавать "наверх" пользовательский ввод, и там единый компонент обновит нужный узел в дереве данных; или в самом листочке-компоненте обработать ввод, запросить API, обновить переданный ему через props кусок общих данных?
Вопрос 2. Как лучше поступить при обновлении: передавать "наверх" или опять же самостоятельно внутри копонента вариться? (вопрос 2 мало отличается от вопроса 1 : )
  • Вопрос задан
  • 160 просмотров
Пригласить эксперта
Ответы на вопрос 1
markmariner
@markmariner
Лучше запрашивать в одном месте наверху и передавать вниз. Контроль за выполнением станет очевидным, при росте приложения переход на Vuex станет безболезненным.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы