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

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

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

 
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
 

В этом примере мы используем хук useState для хранения состояния и обрабатываем клик на кнопке с помощью функции increment.

Разберем этот код подробней:

– useState (0): Это вызов хука состояния. Он возвращает массив из двух элементов. Первый элемент (count в данном случае) – это текущее значение состояния, второй элемент (setCount в данном случае) – это функция для обновления состояния. Значение, переданное в useState (0), устанавливается в качестве начального значения состояния (count).

– const [count, setCount]: Это деструктуризация массива, который возвращает useState. Таким образом, count присваивается текущее значение состояния, а setCount присваивается функция для обновления состояния.

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

– setCount – это функция, служащая для обновления значения count и перерендеривания компонента. При вызове setCount (newValue), React обновляет значение count на newValue и перерисовывает компонент с новым значением.

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

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

Глава 2. Работа с формами и контролируемые компоненты

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

Для создания формы в React, вы можете использовать стандартные HTML-элементы внутри компонента JSX. Например:

 
import React, {Component} from ’react’
class MyForm extends Component {
  render () {
    return (
      <form>
        <label>
          Имя:
          <input type=«text» />
        </label>
        <button type=«submit»> Отправить </button>
      </form>
);
}
}
function App () {
  return <MyForm />
}
export default App
 

В этом примере создается форма с полем для ввода имени и кнопкой отправки.

Или через функциональный компонент:

 
import React from ’react’
 
 
function MyForm () {
  return (
    <form>
      <label>
        Имя:
        <input type=«text» />
      </label>
      <button type=«submit»> Отправить </button>
    </form>
);
}
 
 
function App () {
  return <MyForm />
}
 
 
export default App
 

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

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

 
import React, {useState} from ’react’
function ControlledForm () {
  const [name, setName] = useState (»»)
 
 
  const handleChange = (event) => {
setName(event.target.value)
};
  const handleSubmit = (event) => {
event.preventDefault ()
    alert (`Привет, $ {name}!`)
};
 
 
  return (
    <form onSubmit= {handleSubmit}>
      <label>
        Имя:
        <input type=«text» value= {name} onChange= {handleChange} />
      </label>
      <button type=«submit»> Отправить </button>
    </form>
);
}
function App () {
  return <ControlledForm />
}
export default App
 

Разъяснения:

– Обработчик события handleChange вызывается при изменении значения в поле ввода. Он обновляет состояние name значением из поля ввода.

– Обработчик события handleSubmit вызывается при отправке формы. Он предотвращает стандартное поведение формы и перезагрузку страницы. с помощью event.preventDefault (), и выводит приветственное сообщение с использованием текущего значения name.

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

Для отправки данных формы на сервер вы можете использовать атрибут onSubmit и метод event.preventDefault:

handleSubmit = (event) => {

event.preventDefault ()

// Отправка данных на сервер или выполнение другой логики

}

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

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

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

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

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

Глава 3. Валидация ввода данных

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

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

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

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

Валидация данных на стороне клиента выполняется в браузере пользователя перед отправкой данных на сервер. Это позволяет предоставить обратную связь пользователю о неправильно введенных данных до отправки формы.

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

Пример валидации на стороне клиента:

 
import React, {useState} from ’react’
const ValidationExample = () => {
  const [username, setUsername] = useState (»»)
  const [password, setPassword] = useState (»»)
  const [isValid, setIsValid] = useState (true)
  const handleUsernameChange = (event) => {
setUsername(event.target.value);
    // имя пользователя должно содержать не менее 5 символов
setIsValid(event.target.value. length> = 5)
}
  const handlePasswordChange = (event) => {
setPassword(event.target.value);
    // пароль должен содержать не менее 8 символов
setIsValid(event.target.value. length> = 8)
}
  const handleSubmit = (event) => {
event.preventDefault ()
    // Дополнительная обработка после отправки формы, например, отправка данных на сервер
};
  return (
    <form onSubmit= {handleSubmit}>
      <div>
        <label>
          Имя пользователя:
          <input type=«text» value= {username} onChange= {handleUsernameChange} />
        </label>
      </div>
      <div>
        <label>
          Пароль:
          <input type=«password» value= {password} onChange= {handlePasswordChange} />
        </label>
      </div>
      <button type=«submit» disabled= {!isValid}>
        Войти
      </button>
      {!isValid && <p> Пожалуйста, введите корректные данные. </p>}
    </form>
)
}
export default ValidationExample
 

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

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

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

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

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

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

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

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

Глава 4. Управление состоянием и обновление компонентов

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

Состояние (state) – это объект, в котором компонент хранит данные, которые могут изменяться во времени и влиять на отображение. Изменение состояния вызывает перерендеринг компонента.

Рассмотрим пример использования хука useState и useEffect в функциональном компоненте:

 
import React, {useState, useEffect} from ’react’
 
 
function MyComponent () {
  // Инициализация состояния
  const [count, setCount] = useState (0)
 
 
  // Использование useEffect для эмуляции componentDidMount
  useEffect (() => {
    console. log («Компонент был загружен»)
    // Здесь можно выполнять дополнительные действия при загрузке компонента
    // Например, выполнить запрос к серверу, подписаться на какие-то события и т. д.
    return () => {
      console. log («Компонент будет размонтирован»)
      // Здесь можно выполнить очистку, отписаться от событий и т. д.
};
}, []); // Пустой массив зависимостей означает, что эффект будет выполнен только один раз после загрузки компонента
 
 
  // Функция для обновления состояния
  const incrementCount = () => {
    setCount (count +1)
};
 
 
  return (
    <div>
      <p> Count: {count} </p>
      <button onClick= {incrementCount}> Increment </button>
    </div>
)
}
 
 
export default MyComponent
 

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

В классовых компонентах, где у нас есть доступ к методу setState, мы можем использовать его следующим образом:

 
import React, {Component} from ’react’
 
 
class StateExample extends Component {
  constructor (props) {
    super (props);
this.state = {
      count: 0,
}
}
 
 
  incrementCount = () => {
    // Обновление состояния с использованием метода setState
this.setState ((prevState) => ({
      count: prevState.count +1,
}))
}
 
 
  render () {
    return (
      <div>
        <p> Текущее значение счетчика: {this.state.count} </p>
        <button onClick={this.incrementCount}> Увеличить </button>
      </div>
)
}
}
 
 
export default StateExample
 

В функциональных компонентах мы используем хук useState для работы с состоянием:

 
import React, {useState} from ’react’;
 
 
function StateExampleFunctional () {
  // Инициализация состояния с хуком useState
  const [count, setCount] = useState (0)
 
 
  const incrementCount = () => {
    // Обновление состояния с использованием функции setCount
    setCount ((prevCount) => prevCount +1)
}
 
 
  return (
    <div>
      <p> Текущее значение счетчика: {count} </p>
      <button onClick= {incrementCount}> Увеличить </button>
    </div>
)
}
 
 
export default StateExampleFunctional
 

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

Состояние компонента может быть передано другим компонентам через props. Это позволяет создавать иерархию компонентов, в которой данные передаются сверху вниз, обеспечивая четкое и предсказуемое распределение данных и состояния между компонентами и соблюдение принципа однонаправленного потока данных (one-way data flow) в React-приложениях.

Передача состояния через props способствует созданию более модульных и переиспользуемых компонентов. Каждый компонент может иметь своё собственное локальное состояние, но при необходимости оно может быть поднято вверх по иерархии и управляться родительским компонентом. Это обеспечивает баланс между локальным управлением состоянием и общим управлением внутри приложения.

Пример:

 
import React, {useState} from ’react’
 
 
function ParentComponent () {
  // Локальное состояние родительского компонента
  const [parentState, setParentState] = useState («Initial Parent State’)
 
 
  return (
    <div>
      <h1> Parent Component </h1>
      <p> Parent State: {parentState} </p>
      <ChildComponent parentState= {parentState} />
    </div>
);
}
 
 
function ChildComponent ({parentState}) {
  // Локальное состояние дочернего компонента
  const [childState, setChildState] = useState («Initial Child State’)
 
 
  return (
    <div>
      <h2> Child Component </h2>
      <p> Parent State in Child: {parentState} </p>
      <p> Child State: {childState} </p>
    </div>
);
}
 
 
export default ParentComponent
 

В этом примере ParentComponent содержит свое локальное состояние (parentState), которое передается в качестве пропса дочернему компоненту ChildComponent. В ChildComponent также есть свое собственное локальное состояние (childState). Это демонстрирует передачу данных от родителя к ребенку через пропсы и использование локального состояния в обоих компонентах.

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

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

В функциональных компонентах с использованием хуков, таких как useState, каждый вызов хука создает отдельное состояние.

Например:

 
import React, {useState} from ’react’
 
 
function ExampleComponent () {
  // Два отдельных частных состояния
  const [count, setCount] = useState (0)
  const [text, setText] = useState (»»)
 
 
  return (
    <div>
      <p> Count: {count} </p>
      <p> Text: {text} </p>
      {/* … */}
    </div>
 

)

}

Здесь count и text – это две отдельные части состояния компонента ExampleComponent.