Читать книгу React и TypeScript: Практическое руководство. Быстрый старт - - Страница 15

В React props и state – это два основных механизма для управления данными, обновления пользовательского интерфейса и взаимодействия с компонентами. В этой главе мы рассмотрим, как использовать props и state для передачи и управления данными в компонентах React.

6.1 Введение в props и state

Props (сокращение от «properties») представляют собой механизм передачи данных в компоненты React. Они представляют собой входные данные, получаемые компонентом от его родительского компонента. Props передаются компоненту в виде атрибутов и становятся доступными внутри компонента, как свойства.

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

Пример: Если у вас есть компонент «Кнопка», то пропс может содержать информацию о том, какой текст должен отображаться на кнопке. Вы передаете этот текст в компонент, и компонент использует его для отображения на кнопке.

Преимущества использования props:

– Расширяемость. Props являются расширяемым и удобным способом передачи данных в компоненты, особенно, когда у вас есть множество разных пропсов. При использовании props вы также можете определить значения по умолчанию и лучше структурировать ваш компонент.

Пример:

)

}

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

– Значения по умолчанию: Вы можете задать значения по умолчанию для props, что полезно, если некоторые данные не передаются. Например, если props.age не был передан, вы можете использовать значение по умолчанию.

Пример:

)

}

Хотя слово «props» является стандартным и широко используется в сообществе React, вы можете использовать любое другое слово в качестве аргумента функции компонента. Это полностью зависит от вас и вашего стиля кодирования.

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

Пример с использованием другого имени для аргумента:

)

}

При использовании компонента:

<PersonInfo name=«Алиса» age= {30} />

Стоит помнить, что использование слова «props» для аргумента функции компонента – это стандартная практика в сообществе React, и она делает ваш код более читаемым и понятным для других разработчиков, знакомых с React. Большинство разработчиков ожидают видеть props как стандартное имя для пропсов, и это может упростить совместную работу над проектами.

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

State – это специальный объект внутри компонента, который используется для хранения и отслеживания изменяющихся данных. Стейт позволяет компоненту «запоминать» данные и перерисовывать себя, когда эти данные меняются.

Пример: Если у вас есть компонент «Счетчик», то стейт может содержать текущее значение счетчика. Когда пользователь нажимает на кнопку увеличения счетчика, стейт изменяется, и компонент обновляется, чтобы отобразить новое значение счетчика.

count в данном случае представляет начальное состояние (значение), которое мы указываем в useState, и setCount – это функция, которую мы используем для обновления этого состояния. В нашем случае, increment вызывает setCount, чтобы увеличить значение count.

Итак, обощим:

Пропсы (Props) – это данные, которые вы передаете в компонент извне, как параметры.

Стейт (State) – это данные, которые компонент «запоминает» и использует для отслеживания изменений и перерисовки себя.

6.2 Использование пропсов

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

Вот основные аспекты работы с пропсами в React:

– Передача данных. Пропсы позволяют родительскому компоненту передавать данные в дочерний компонент. Эти данные могут быть переданы в виде атрибутов (параметров) при использовании компонента в JSX.

– Нестрогое чтение (доступ). Дочерний компонент может получить доступ к пропсам, используя props (для функциональных компонентов) или this.props (для классовых компонентов).

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

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

– Проверка типов (Type Checking). React позволяет проводить проверку типов пропсов с помощью PropTypes (для функциональных компонентов) или propTypes (для классовых компонентов). Это помогает предотвратить ошибки типов во время выполнения.

Пример использования:

В этом примере компонент App передает name=«John» в дочерний компонент Welcome через props.

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

– Использование state

Стейт (state) в React представляет собой объект, который содержит данные, влияющие на отображение компонента, и используется для хранения информации, которая может изменяться со временем и должна быть учтена при перерисовке компонента.

Важные аспекты работы со стейтом в React:

– Локальный для компонента. Стейт обычно является локальным для компонента, что означает, что каждый компонент имеет свой собственный стейт. Это помогает изолировать данные и логику между компонентами.

– Инициализация. Стейт может быть инициализирован в конструкторе компонента при использовании классовых компонентов или с использованием хука useState в функциональных компонентах.

– Изменение стейта. Стейт можно изменять с помощью метода setState (для классовых компонентов) или функции, возвращаемой хуком useState (для функциональных компонентов). При изменении стейта React автоматически перерисовывает компонент.

– Асинхронность. Вы должны быть осторожны при изменении стейта, так как операции по его изменению могут быть асинхронными. React может объединять несколько обновлений стейта для оптимизации производительности.

– Неизменяемость (Immutability). Рекомендуется не изменять стейт напрямую, а создавать новый объект стейта с обновленными данными. Это помогает предотвратить мутацию стейта и упростить отслеживание изменений.

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

Таким образом, state используется для хранения данных, которые могут изменяться и влиять на отображение компонента. Вы можете инициализировать стейт в конструкторе компонента и изменять его с помощью метода setState ().

Пример использования:

Рассмотрим код подробней.

Конструктор – это особая функция в React-компонентах, которая выполняется при создании нового экземпляра компонента. Она принимает props в качестве параметра и вызывает базовый конструктор через super (props), чтобы унаследовать функциональность родительского компонента. В конструкторе обычно инициализируют начальное состояние компонента и выполняют другие подготовительные операции.

Однако, в современных версиях React большинство разработчиков предпочитают использовать более современный синтаксис с хуками (useState, useEffect, и т.д.), который обеспечивает более читаемый и функциональный способ управления состоянием и эффектами. Хуки стали стандартом в React и рекомендуются для большинства проектов.

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

– constructor (props): Мы объявляем конструктор для нашего компонента и передаем ему props (свойства), которые компонент получит от родительского компонента. Таким образом, props содержат информацию о данных, которые компонент может использовать.

– super (props): Эта строка вызывает конструктор родительского класса (класса React.Component). Она необходима, чтобы наш компонент мог правильно наследовать функциональность React и корректно обрабатывать переданные свойства (props).

– this.state = {count: 0};: Здесь мы инициализируем локальное состояние компонента. В данном случае, мы создаем переменную count и устанавливаем ее значение на 0. Состояние – это способ для компонента React хранить и отслеживать изменения данных, которые могут влиять на отображение на веб-странице.

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

В этом примере компонент Counter (счетчик) имеет внутренний state, который используется для отслеживания количества нажатий на кнопку «Увеличить». Метод setState () обновляет состояние компонента, что влечет за собой перерендеринг.

– Ипользование пропсов и стейтов

Пропсы (props) позволяют передавать информацию от одного компонента к другому, что делает взаимодействие между компонентами в React гибким и модульным. С использованием состояния (state), вы можете управлять внутренними данными компонента, такими как значения полей ввода или флаги активации, что позволяет компоненту реагировать на пользовательские действия и динамически изменять свое отображение в соответствии с этими данными. Важно помнить, что props – это данные, которые передаются сверху вниз и не изменяются внутри компонента, в то время как state – это изменяемые данные, управляемые самим компонентом.

Используйте пропсы (props), чтобы передавать данные от родительского компонента к дочернему компоненту.

Используйте стейт (state), чтобы управлять внутренним состоянием компонента, которое может изменяться и влиять на его отображение.

Помните, что props – это неизменяемые, а state – изменяемые данные.

6.5 Заключение

Использование props и state в React является фундаментом для создания динамичных и интерактивных пользовательских интерфейсов. Пропсы позволяют компонентам обмениваться данными и структурировать приложение в виде множества многоразовых и переиспользуемых компонентов. Операция о своевременном обновлении состояния компонента через state является ключевой для создания отзывчивых приложений, которые реагируют на действия пользователя. Умение совмещать работу с props и state открывает широкие возможности для разработки сложных приложений.

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