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

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

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

Глава 7. Методы жизненного цикла компонентов

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

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

В React компоненты проходят через различные этапы своего жизненного цикла, которые тесно связаны с процессами монтирования (создания и добавления в DOM) и размонтирования (удаления из DOM). Рассмотрим эти этапы подробнее:

Монтирование (Mounting):

– constructor (): Вызывается при создании объекта компонента. Здесь происходит инициализация состояния и привязка методов.

– static getDerivedStateFromProps (): Метод, вызываемый перед render, позволяющий компоненту обновить своё внутреннее состояние на основе изменений в свойствах.

– render (): Отвечает за отображение компонента, возвращая элементы для отображения в интерфейсе.

– componentDidMount (): Вызывается сразу после добавления компонента в DOM. Подходит для выполнения действий, которые требуют наличия компонента в DOM, например, запросов к серверу.

Размонтирование (Unmounting):

– componentWillUnmount (): Вызывается перед удалением компонента из DOM. Здесь происходит очистка ресурсов, таких как отмена запросов или удаление подписок.

Эти этапы жизненного цикла предоставляют точки вставки для кода, который должен выполняться при создании и удалении компонента. Дополнительно, React предоставляет другие важные методы жизненного цикла, такие как componentDidUpdate, который вызывается после обновления компонента и предоставляет возможность реагировать на изменения в props или state.

Рассмотрим пример использования методов жизненного цикла:

 
import React, {Component} from ’react’
class Timer extends Component {
  constructor (props) {
    super (props)
this.state = {seconds: 0}
}
  componentDidMount () {
this.intervalId = setInterval (() => {
this.setState ({seconds: this.state.seconds +1})
}, 1000)
}
  componentWillUnmount () {
clearInterval(this.intervalId)
}
  render () {
    return <p> Секунды: {this.state.seconds} </p>
}
}
function App () {
  return <Timer />
}
export default App
 

В этом примере:

– В методе constructor инициализируется начальное состояние компонента.

– В методе componentDidMount устанавливается интервал, который каждую секунду увеличивает значение seconds в состоянии.

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

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

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

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

Глава 8. Автоматическое создание объектов props в React

Автоматическое создание объектов props – это инструмент, который упрощает передачу данных между компонентами. Давайте рассмотрим, как этот подход может ускорить разработку и сделать ваш код более чистым и читаемым.

В React, props (сокращение от «properties» или «свойства») – это специальный объект, который используется для передачи данных и настроек от родительского компонента к дочернему компоненту. Он представляет собой набор свойств, которые доступны дочернему компоненту для использования. Эти свойства передаются в компонент в виде атрибутов JSX при его использовании.

Рассмотрим простой пример. У нас есть родительский компонент ParentComponent и дочерний компонент ChildComponent. Мы хотим передать строковое свойство message из родительского компонента в дочерний компонент для отображения:

 
// Родительский компонент
function ParentComponent () {
    return <ChildComponent message=«Привет, мир!» />
}
 
 
  // Дочерний компонент
  function ChildComponent (props) {
    return <div>{props.message} </div>
 

}

В приведенном примере, свойство message передается из родительского компонента ParentComponent в дочерний компонент ChildComponent следующим образом:

– В родительском компоненте, при использовании компонента ChildComponent, мы добавляем атрибут message и устанавливаем его значение в «Привет, мир!».

– Внутри дочернего компонента ChildComponent, это свойство становится доступным через объект props. мы можем получить доступ к нему, обратившись к props.message и использовать его для отображения внутри компонента.

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

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

Что касается области видимости, то React обеспечивает уровень доступа к свойствам компонента через объект props, который может быть рассмотрен как «публичный интерфейс» компонента. Дочерний компонент не имеет доступа к свойствам родительского компонента напрямую, за исключением тех свойств, которые были явно переданы через props. Это обеспечивает инкапсуляцию2121
  Инкапсуляция – это упаковка данных и методов, работающих с этими данными, в единый объект (класс или модуль), и скрытие деталей реализации от внешнего мира. Это позволяет ограничить доступ к данным и методам объекта, предоставив только определенный интерфейс (публичные методы и свойства) для взаимодействия с ним.


[Закрыть] и изоляцию компонентов и упрощает их переиспользование.

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

Для того, чтобы определить, является ли текущий компонент родительским, можно воспользоваться следующими методами:

– Иерархия компонентов. Родительский компонент – это тот, который находится на более высоком уровне иерархии компонентов, и от которого исходят данные или свойства для одного или нескольких дочерних компонентов. Дочерний компонент, наоборот, находится внутри родительского компонента.

– Анализ кода. Если вы изучаете код приложения, родительский компонент обычно тот, который решает, какие данные передавать дочерним компонентам через props и какие обработчики событий передавать для взаимодействия с дочерними компонентами.

– Свойство children. Родительский компонент может использовать свойство children, чтобы передать дочерним компонентам элементы JSX внутри компонента. Если вы видите, что в родительском компоненте есть использование props.children, это может быть признаком того, что компонент решает, какие компоненты или элементы JSX вставлять внутри себя.

Таким образом, объект props в React позволяет передавать данные и настройки между компонентами и делает компоненты более гибкими и переиспользуемыми.

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

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

Например:

function MyComponent (props) {

//…

}

– Использование компонента в JSX. При использовании компонента в JSX, вы передаете свойства, используя атрибуты компонента. Например:

<MyComponent name=«John» age= {30} />

В этом примере мы передаем два свойства (name и age) в компонент MyComponent.

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

{

name: «John»,

age: 30

}

Использование свойств внутри компонента: Внутри компонента вы можете обращаться к свойствам через объект props.

Например:

 
function MyComponent (props) {
    return (
      <div>
        <p> Name: {props.name} </p>
        <p> Age: {props.age} </p>
      </div>
 

)

}

В этом примере компонент MyComponent использует свойства name и age, которые были переданы через props.

Таким образом, React автоматически создает объект props для каждой инстанции компонента на основе переданных атрибутов JSX, и этот объект становится доступным внутри компонента для доступа к переданным свойствам.

В React, чтобы получить доступ к свойствам из объекта props внутри компонента, вы можете использовать обычную точечную нотацию, так как мы это делали ранее. Однако также существует более удобный способ с использованием деструктуризации2222
  Деструктуризация – это способ извлечь данные из структуры данных, таких как массивы или объекты, используя более компактный и удобный синтаксис.


[Закрыть] объекта props.

Предположим, у нас есть компонент MyComponent, который принимает свойство name из объекта props:

 
import React from ’react’
 
 
function MyComponent (props) {
  return (
    <div>
      <p> Name: {props.name} </p>
    </div>
)
}
 
 
export default MyComponent
 

Деструктуризация для более удобного доступа к свойствам:

 
import React from ’react’
 
 
function MyComponent ({name}) {
  return (
    <div>
      <p> Name: {name} </p>
    </div>
)
}
 
 
export default MyComponent
 

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

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

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

Например:

 
import React from ’react’
 
 
function MyComponent (props) {
  return (
    <div>
      <p> Name: {props.name} </p>
      <p> Age: {props.age} </p>
      <p> Gender: {props.gender} </p>
    </div>
)
}
 
 
export default MyComponent
 

В этом примере компонент MyComponent принимает три свойства: name, age и gender. Вы можете указать их в объекте props в любом порядке, и React все равно правильно соотнесет их с соответствующими значениями, например:

<MyComponent age= {30} name=«John» gender=«male» />

Или:

<MyComponent gender=«male» name=«John» age= {30} />

Оба этих варианта будут работать корректно, потому что React определяет свойства по их именам, а не по порядку.

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

 
import React from ’react’
function MyComponent ({name, age, gender}) {
  return (
    <div>
      <p> Name: {name} </p>
      <p> Age: {age} </p>
      <p> Gender: {gender} </p>
    </div>
)
}
 
 
export default MyComponent
 

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

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

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

Дополнительная информация

Расширения js, jsx, и tsx связаны с языками программирования и технологиями, используемыми в разработке веб-приложений на React и TypeScript:

– .js: Это стандартное расширение для JavaScript-файлов. В файлах с этим расширением хранится код на языке JavaScript. React-приложения можно создавать с использованием чистого JavaScript, и в этом случае вы можете использовать. js файлы для компонентов и другой логики.

– .jsx: Расширение. jsx используется для файлов, в которых содержится JSX – расширение JavaScript, которое позволяет описывать структуру пользовательского интерфейса React внутри JavaScript-кода. JSX обычно преобразуется в JavaScript с помощью Babel перед тем, как браузер его выполняет.

– .tsx: Расширение. tsx используется, когда вы разрабатываете React-приложения с использованием TypeScript. TypeScript – это язык, предоставляющий статическую типизацию поверх JavaScript. Файлы. tsx содержат код на TypeScript и позволяют объявлять типы данных для компонентов и данных при работе с React. TypeScript имеет свой собственный встроенный компилятор, который обрабатывает TypeScript код, преобразуя его в JavaScript.

Краткое сравнение этих расширений:

– .js: Обычные JavaScript-файлы, без статической типизации и JSX.

– .jsx: Файлы с JSX-синтаксисом для React, но без статической типизации.

– .tsx: Файлы с JSX и статической типизацией с использованием TypeScript.

Если вы используете TypeScript в своем проекте, то. tsx будет вашим стандартным выбором для компонентов React. В противном случае. js и. jsx будут более подходящими расширениями для файлов вашего приложения.

– useState: Добавляет локальное состояние в функциональные компоненты.

– useEffect: Позволяет выполнять побочные эффекты в функциональных компонентах, такие как выполнение кода после рендеринга компонента или подписка на внешние данные.

– useContext: Позволяет получить доступ к контексту приложения в функциональных компонентах.

– useReducer: Предоставляет способ управления сложным локальным состоянием компонента через паттерн управления состоянием «Reducer».

– useRef: Позволяет создавать и управлять ссылками на DOM-элементы и другие объекты.

– useMemo: Оптимизирует производительность компонентов, предотвращая ненужные вычисления.

– useCallback: Оптимизирует производительность компонентов, предотвращая ненужные перерисовки компонентов.

– useLayoutEffect: Подобен useEffect, но срабатывает синхронно после изменения DOM перед фактическим рендерингом.

– useEffectOnce: Позволяет выполнить эффект только один раз после первого рендеринга компонента.

– useDebugValue: предоставляет дополнительную отладочную информацию для кастомных хуков.

– useHistory и useLocation: Позволяют взаимодействовать с историей браузера и текущим URL внутри компонентов.

– useParams: извлекает параметры из URL при использовании маршрутизации.

– useForm: Помогает управлять состоянием форм и их валидацией.

– useFetch: Предоставляет удобный способ выполнения HTTP-запросов.

– useWindowSize: Отслеживает изменения размеров окна браузера.

Часть 2. Работа с формами и событиями

Глава 1. Обработка событий в React

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

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

При работе с React, разработчики могут использовать принцип управляемых компонентов (controlled components), где состояние компонента контролируется через обработчики событий. Это позволяет динамически обновлять пользовательский интерфейс в зависимости от ввода пользователя и текущего состояния приложения.

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

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

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

Примеры атрибутов-обработчиков событий в React:

– onClick: Вызывается при клике на элементе.

– onSubmit: Вызывается при отправке формы.

– onChange: Вызывается при изменении значения элемента формы (например, при вводе текста в поле ввода).

– onMouseEnter и onMouseLeave: Вызываются при наведении указателя мыши на элемент и его покидании.

– onKeyDown и onKeyUp: Вызываются при нажатии и отпускании клавиши клавиатуры.

Пример обработки события onClick:

import React, {Component} from ’react’

class Button extends Component {

handleClick () {

alert («Кнопка была нажата!»)

}

render () {

return <button onClick= {this. handleClick}> Нажми меня </button>

}

}

function App () {

return <Button />

}

export default App

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

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

Для этого можно использовать стрелочные функции или метод bind.

Простой пример передачи параметра:

 
import React, {Component} from ’react’
class Greeting extends Component {
  sayHello (name) {
    alert (`Привет, $ {name}!`)
}
  render () {
    return (
      <button onClick= {() => this.sayHello («John’)}> Поздороваться </button>
)
}
}
function App () {
  return <Greeting />
 

}

1. Стрелочные функции:

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

Пример:

<button onClick= {() => this.deleteTask(task.id)}> Удалить </button>

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

2. Метод bind:

Другой способ – использовать метод bind для привязки параметров к обработчику события.

Пример:

<button onClick={this.deleteTask.bind (this, task.id)}> Удалить </button>

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

Выбор между стрелочными функциями и методом bind зависит от вашего стиля кодирования и конкретной ситуации. Оба метода позволяют передавать дополнительные параметры в обработчик события и обеспечивают удобное взаимодействие с React-компонентами.;