React и TypeScript: Практическое руководство. Быстрый старт

<div>
{props. loading? (
«Загрузка…»
): (
<div>
Привет, {props.data.name}!
<p> Email: {props. data. email} </p>
</div>
)}
</div>
);
}

export default withDataFetching (UserComponent)

Теперь UserComponent получает данные из сети благодаря HOC withDataFetching

5.5 Заключение

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

Одним из наиболее важных аспектов, который мы рассмотрели, является вложенность компонентов. Мы поняли, как важно правильно структурировать компоненты в иерархии, чтобы сделать наш код чище и более организованным. Вложенность позволяет нам создавать маленькие, переиспользуемые компоненты, которые могут быть объединены в более крупные структуры, создавая мощные и гибкие интерфейсы.

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

Глава 6. Основы использования props и state

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

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

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

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

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

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

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

Пример:

function UserProfile (props) {
return (
<div>
<p> Name: {props.name} </p>
<p> Age: {props.age} </p>
{/* Другие свойства */}
</div>

)

}

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

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

Пример:

function UserProfile (props) {
const age = props.age || 25 // Значение по умолчанию
return (
<div>
<p> Name: {props.name} </p>
<p> Age: {age} </p>
</div>

)

}

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

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

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

function PersonInfo (data) {
return (
<div>
<p> Имя: {data.name} </p>
<p> Возраст: {data.age} </p>
</div>

)

}

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

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

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

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

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