Reactjs - поток данных

#reactjs #state

#reactjs #состояние

Вопрос:

У меня есть общий вопрос о том, куда загружать данные в Reactjs.

Основной компонент называется App. Затем приложение возвращает 3 компонента: верхний, основной и нижний колонтитулы. Теперь внутри Body есть компонент Tab, который далее подразделяется на несколько компонентов, включая компонент под названием «сетки».

Теперь я хочу, чтобы мои данные (после фильтрации) отображались в сетках.

Пожалуйста, поправьте меня, если я делаю это неправильно, но мое мышление:

Загрузите данные в приложение основного компонента как состояние:
Передайте его в тело с помощью:
```
 <Body data={this.state.data} />
  
```
В основном компоненте передайте его дальше как:
```
 <Tabs data={this.props.data} />
  
```
В компоненте Tabs передайте его дальше как:
```
 <Grids data={this.props.data} />
  
```
В таблицах напишите все методы для фильтрации данных и соответствующим образом отобразите / верните их.

Это правильно?

Спасибо

Ответ №1:

Поток, который вы описали, правильный. Альтернативный подход заключается в использовании контекста: все, что задано в контексте одного компонента, доступно каждому потомку этого компонента, без установки реквизитов промежуточных компонентов.

Однако контекст сопровождается предупреждением:

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

Кстати, для управления данными я бы использовал что-то вроде Flux или Redux. Управление данными непосредственно в компонентах React быстро становится проблемой по мере роста приложения. С другой стороны, Flux / Redux очень хорошо масштабируется.