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

Глава 5. Работа с компонентами и их вложенность

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

5.1 Создание компонента

Создание компонента в React – это простой процесс. Существуют функциональный или классовый компоненты.

– Функциональный компонент основан на функциях JavaScript и представляет из себя функцию, которая принимает входные данные (props) и возвращает JSX элемент, который будет отображаться на экране. Функциональные компоненты стали более популярными с появлением React Hooks²⁰ и обладают следующими ключевыми характеристиками:

– Простота и чистота. Функциональные компоненты обычно более краткие и легче читаемы, чем классовые компоненты. Они представляют из себя обычные JavaScript-функции, что делает код более понятным.

– Использование Hooks. С появлением React Hooks (таких как: useState, useEffect и многие другие) функциональные компоненты могут управлять состоянием и жизненным циклом компонента так же, как классовые компоненты. Это позволяет функциональным компонентам выполнять разнообразные задачи, например, такие как: управление состоянием, выполнение побочных эффектов и многое другое.

– Отсутствие this. В функциональных компонентах отсутствует ключевое слово this, что устраняет проблемы с областью видимости и контекстом, связанными с классовыми компонентами.

– Большая производительность. Функциональные компоненты могут иметь более высокую производительность из-за отсутствия накладных расходов, связанных с созданием экземпляров классов.

– Легко тестируемы. Функциональные компоненты часто более легко поддаются модульному тестированию, так как их поведение зависит только от входных данных (props) и их вывода (возвращаемого JSX).

Пример функционального компонента:

 
import React from ’react’
function MyComponent () {
  return <h1> Привет, это мой первый компонент! </h1>
}
export default MyComponent
 

Функциональные компоненты являются предпочтительным способом создания компонентов в React.

– Классовый компонент определен как класс JavaScript и расширяет базовый класс React.Component. Классовые компоненты имеют следующие ключевые характеристики:

– Состояние (State). Классовые компоненты имеют доступ к локальному состоянию, которое может быть использовано для хранения и управления данными, изменяющимися во времени. Состояние компонента может быть изменено с помощью метода setState, и изменения состояния приводят к перерисовке компонента.

– Жизненный цикл (Lifecycle). Классовые компоненты поддерживают разнообразные методы жизненного цикла, такие как componentDidMount, componentDidUpdate, и componentWillUnmount. Жизненный цикл компонента – это специальные методы, которые вызываются в разные моменты времени в жизни компонента. Например, componentDidMount вызывается после того, как компонент был добавлен к DOM. Эти методы позволяют выполнять действия при монтировании, обновлении и размонтировании компонента.

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

– Контекст (Context). Классовые компоненты могут использовать механизм контекста React для передачи данных глубоко в иерархии компонентов без необходимости передавать пропсы через каждый уровень.

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

import React, {Component} from ’react’

class MyComponent extends Component {

render () {

return <h1> Привет, это мой компонент! </h1>

}

}

export default MyComponent

5.2 Использование компонентов

Чтобы использовать компонент в другом компоненте или приложении, вы должны его импортировать и затем использовать как тег JSX.

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

 
import React from ’react’
import MyComponent from». /MyComponent’
function App () {
  return (
    <div>
      <h1> Мое приложение React </h1>
      <MyComponent />
    </div>
);
}
export default App
 

5.3 Вложенность компонентов

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

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

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

)

}

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

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

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

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

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

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

 
import React, {useState} from ’react’
function Counter () {
  const [count, setCount] = useState (0)
 
 
  const increment = () => {
    setCount (count +1)
}
 
 
  return (
    <div>
      <p> Текущее значение: {count} </p>
      <button onClick= {increment}> Увеличить </button>
    </div>
)
}
function App () {
  return <Counter />
}
 
 
export default App
 

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

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

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

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

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

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

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

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

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

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

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

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

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

 
import React from ’react’
function Welcome (props) {
  return <h1> Привет, {props.name}! </h1>
}
function App () {
  return <Welcome name=«John» />
}
export default App
 

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

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

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

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

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

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

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

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

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

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

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

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

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

 
import React, {Component} from ’react’
class Counter extends Component {
  constructor (props) {
    super (props)
this.state = {count: 0}
}
  incrementCount = () => {
this.setState ({count: this.state.count +1})
}
  render () {
    return (
      <div>
        <p> Счетчик: {this.state.count} </p>
        <button onClick={this.incrementCount}> Увеличить </button>
      </div>
)
}
}
function App () {
  return <Counter />
}
export default App
 

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

Конструктор – это особая функция в 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 – изменяемые данные.