Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.

Разработчику React или React Native важно понимать концепцию контейнеров и презентационных компонентов.

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

Что такое компоненты контейнера?

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

Для реализации этой структуры можно использовать библиотека, такая как React-Redux для подключения ваших компонентов к хранилищу и передачи данных и действий вашим дочерним компонентам или презентационным компонентам.

Что такое презентационные компоненты?

Презентационные компоненты отвечают за отображение данных из своих родительских компонентов. Они часто не имеют состояния и сосредоточены на пользовательском интерфейсе и визуальном представлении данных.

instagram viewer

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

Зачем использовать контейнерные и презентационные компоненты?

Короткий и простой ответ на вопрос: разделение интересов. Это ключевой принцип в нескольких парадигмах, включая объектно-ориентированное, функциональное и аспектно-ориентированное программирование. Однако многие разработчики React склонны игнорировать эти концепции и предпочитают писать код, который просто работает.

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

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

Ваши компоненты могут по-прежнему перекрываться; разделение обязанностей между контейнером и презентационным компонентом не всегда четкое. Однако, как правило, вы должны сосредоточить свои презентационные компоненты на визуальных данных, а контейнерные компоненты — на данных и логике.

Как использовать контейнерные и презентационные компоненты в React Native

В типичном приложении React Native обычно создаются компоненты, содержащие как презентационный, так и логический код. Вы можете получать данные из API, управлять состоянием формы и отображать вывод в одном классе. Рассмотрим простое приложение, которое получить список пользователей из API и отображать их имена и возраст.

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

Например:

Импортировать Реагировать, {useState, useEffect} от«реагировать»;
Импортировать { Вид, текст, плоский список } от«реагирующий нативный»;
константа Список пользователей = () => {
константа [пользователи, setUsers] = useState([]);


 использоватьЭффект(() => {
константа fetchUsers = асинхронный () => {
константа ответ = Ждите принести(' https://example.com/users');
константа данные = Ждите ответ.json();
 setUsers (данные);
 };


 выбор пользователей();
 }, []);


возвращаться (
 данные = {пользователи}
 keyExtractor={item => item.id}
 renderItem={({ пункт }) => (

Имя: {item.name}</Text>
Возраст: {item.age}</Text>
 </View>
 )}
 />
 );
};
экспортпо умолчанию Список пользователей;

В этом примере Список пользователей отвечает за управление состоянием поля ввода, выборку данных из API и визуализацию данных.

Лучший и более эффективный способ реализовать это — разделить логику в UserList на компоненты представления и контейнера.

Вы можете создать UserListContainer компонент, который отвечает за получение и управление пользовательскими данными. Затем он может передать эти данные презентационному компоненту, Список пользователей, как реквизит.

Импортировать Реагировать, {useState, useEffect} от«реагировать»;
// Компонент-контейнер
константа ПользовательСписокКонтейнер = () => {
константа [пользователи, setUsers] = useState([]);


 использоватьЭффект(() => {
константа fetchUsers = асинхронный () => {
константа ответ = Ждите принести(' https://example.com/users');
константа данные = Ждите ответ.json();
 setUsers (данные);
 };


 выбор пользователей();
 }, []);


возвращаться<Список пользователейпользователи={пользователи} />;
};
экспортпо умолчанию КонтейнерСпискаПользователей;

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

Импортировать { Вид, текст, плоский список } от«реагирующий нативный»;
// Презентационный компонент
константа Пользователь = ({ Назовите возраст }) => (

Имя: {имя}</Text>
Возраст: {age}</Text>
 </View>
);
// Презентационный компонент
константа Список пользователей = ({ пользователи }) => (
 данные = {пользователи}
 keyExtractor={item => item.id}
 renderItem={({ пункт }) => <Пользовательимя={имя элемента}возраст={элемент.возраст} />}
 />
);

Новый код разделяет исходный компонент на два презентационных компонента, Пользователь и Список пользователейи один контейнерный компонент, UserListContainer.

Лучшие практики для реализации контейнеров и презентационных компонентов

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

  1. Каждый компонент должен иметь четкую и конкретную роль. Компонент-контейнер должен управлять состоянием, а презентационный компонент должен обрабатывать визуальное представление.
  2. По возможности используйте функциональные компоненты вместо компонентов класса. Они проще, легче тестируются и обеспечивают лучшую производительность.
  3. Избегайте включения логики или функциональности в компонент, который не имеет отношения к его назначению. Это помогает сосредоточить внимание на компонентах и ​​упрощает их обслуживание и тестирование.
  4. Используйте свойства для связи между компонентами, четко разделяя задачи и избегая сильно связанных компонентов.
  5. Ненужные обновления состояния могут привести к проблемам с производительностью, поэтому важно обновлять состояние только при необходимости.

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

Преимущества использования контейнеров и презентационных компонентов

Контейнерные и презентационные компоненты могут обеспечить несколько преимуществ. Они могут помочь улучшить структуру вашего кода, удобство сопровождения и масштабируемость. Они также приводят к лучшему сотрудничеству и распределению задач между командами. Они даже могут привести к повышению производительности и оптимизации вашего приложения React Native.

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