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

– Пропсы (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 (