скачать книгу бесплатно
– Пропсы (Props) и состояние (State). Вложенные компоненты могут обмениваться данными через пропсы (входные данные) и состояние (локальные данные). Родительский компонент может передать данные дочернему компоненту через пропсы, что позволяет дочернему компоненту отображать эти данные. Дочерний компонент может также передавать информацию обратно в родительский компонент с помощью обратных вызовов.
– Поддержка композиции. Вложенность компонентов позволяет создавать компоненты, которые могут быть переиспользованы в разных частях приложения. Можно создавать маленькие компоненты, которые решают конкретные задачи, и затем объединять их в более крупные компоненты.
– Разделение ответственности. Разделение функциональности между компонентами позволяет каждому компоненту сосредотачиваться на выполнении конкретных задач. Это улучшает читаемость и обеспечивает модульность кода.
– Управление структурой и стилями. Вложенные компоненты также могут использоваться для создания сложных макетов и структур интерфейса. Каждый компонент может быть стилизован и настроен независимо, что способствует упрощению управления стилями.
Пример вложенности компонентов:
import React from ’react’
function Header () {
return <h1> Заголовок </h1>
}
function Sidebar () {
return (
<div>
<h2> Боковая панель </h2>
</div>
)
}
function App () {
return (
<div>
<Header />
<Sidebar />
<p> Основное содержание </p>
</div>
)
}
export default App
В этом примере Header и Sidebar являются дочерними компонентами, вложенными в компонент App. Это позволяет легко организовывать структуру интерфейса и создавать компоненты, которые можно переиспользовать.
5.4 Компонент высшего порядка
Компонент высшего порядка (Higher Order Component, HOC) в React – это функция, которая принимает компонент и возвращает новый компонент с дополнительной функциональностью.
Допустим, у вас есть компонент, но вам нужно добавить ему какие-то общие функции или свойства, которые могли бы понадобиться в разных частях приложения. Вместо того чтобы копировать и вставлять один и тот же код в разные места, вы можете использовать HOC. Эта функция «обернет» компонент, добавив к нему нужные функции или свойства.
Другими словами, HOC позволяет повторно использовать код и легко расширять функциональность компонентов.
Например, если у вас есть компонент для отображения информации о пользователе, а вы хотите добавить к нему функцию загрузки данных из сети, HOC может помочь сделать это без необходимости изменения самого компонента.
Пример: у вас есть компонент UserComponent, который отображает имя пользователя:
import React from ’react’
const UserComponent = (props) => {
return <div> Привет, {props.name}! </div>;
}
export default UserComponent
Теперь вы хотите добавить к этому компоненту возможность загрузки данных о пользователе из сети. Для этого мы можем использовать HOC:
import React, {Component} from ’react’;
const withDataFetching = (WrappedComponent) => {
return class extends Component {
constructor (props) {
super (props);
this.state = {
data: null,
loading: true,
}
}
async componentDidMount () {
try {
const response = await fetch(this.props. url)
const data = await response. json ()
this.setState ({data, loading: false})
} catch (error) {
console.error («Ошибка:», error)
this.setState ({loading: false})
}
}
render () {
return (
<WrappedComponent
{…this.props}
data={this.state. data}
loading={this.state. loading}
/>
)
}
}
}
export default withDataFetching
Здесь мы должны создать HOC withDataFetching, который загружает данные из указанного URL и передает их в обернутый компонент. После этого мы можем использовать его с нашим UserComponent:
import React from ’react’
import withDataFetching from». /withDataFetching’
const UserComponent = (props) => {
return (
<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 – это специальный объект внутри компонента, который используется для хранения и отслеживания изменяющихся данных. Стейт позволяет компоненту «запоминать» данные и перерисовывать себя, когда эти данные меняются.
