Должен ли контейнер получать ценность от реквизита?

У меня есть такая структура приложения с redux:

app
|-router
| — dashboard container
| — — dashboard component
| — setting container
| — — setting component

Рассмотрим два контейнера, если мне нужно получить перевод текста из магазина, какой способ мне использовать?

(1) Подключитесь к хранилищу redux на маршрутизаторе и перейдите к контейнерам с помощью реквизита

(2) Каждый контейнер подключается к магазину redux индивидуально

использование подключения лучше, поскольку оно дает вам прирост производительности и чище

Apoorva Jhanwer 15.07.2018 15:47
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
1
134
2

Ответы 2

Как пишет в этом номере автор редукции Дан Абрамов

Оба подхода - передача свойств дочерним элементам или подключение их к хранилищу - уместны, однако наличие вложенных компонентов connect () на самом деле даст вам большую производительность. Обратной стороной является то, что они немного больше связаны с приложением и немного сложнее тестировать, но это может не быть большой проблемой.

Он также сформулировал хорошее практическое правило, которому следует следовать на Reddit. https://www.reddit.com/r/reactjs/comments/4azg7q/using_redux_how_do_you_handle_subcomponents_of_a/

Я так делаю:

Начните с использования одного контейнера и нескольких презентационных компонентов По мере роста дерева презентационных компонентов «средние» компоненты начинают передавать слишком много свойств вниз. На этом этапе я оборачиваю некоторые листовые компоненты в контейнеры, чтобы «средним» компонентам не нужно было принимать и передавать свойства, которые полностью с ними не связаны. Повторить Он даже написал об этом в Твиттере:

Постарайтесь, чтобы компоненты вашей презентации были отдельными. Создавайте компоненты-контейнеры, соединяя их, когда это удобно. Когда вам кажется, что вы дублируете код в родительских компонентах, чтобы предоставить данные для одних и тех же дочерних элементов, пора извлечь контейнер.

Итак, простыми словами:

Вы можете использовать connect () на любом уровне. Это делает компонент умным, поскольку он знает, откуда берутся его свойства. У глупого компонента просто есть реквизиты, и они могут появиться откуда угодно. Умный компонент связан с redux; тупой компонент нет.

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

Другие вопросы по теме