Обработка форм в React с помощью хуков
год назад·3 мин. на чтение
В этой статье рассмотрим, как обрабатывать формы в приложениях react с помощью хуков.
Формы
Формы позволяют нам принимать данные от пользователей и отправлять их на сервер для обработки. Это различные типы форм, такие как «Вход», «Регистрация» и т.д. В HTML5 есть элементы формы, такие какinput, textarea, select, они поддерживают собственное внутреннее состояние в DOM, но в React мы поддерживаем состояние элементов формы внутри компонента, чтобы мы могли иметь полный контроль над элементами формы.
Что такое обработка форм
Обработка форм означает, как мы обрабатываем данные формы, когда пользователь изменяет значение или отправляет форму. Давайте посмотрим на пример того, как мы обрабатываем данные инпута с помощью хуков React.В приведенном выше коде мы установили для атрибутаimport React,{useState} from 'react'; function Form() { const [name,setName] = useState(''); function handleNameChange(e){ setName(e.target.value) } function handleSubmit(e) { e.preventDefault() // останавливаем перезагрузку страницы по умолчанию console.log(name); } return ( <form onSubmit={handleSubmit}> <input placeholder="Name" value={name} onChange={handleNameChange}/> <button>Submit</button> </form> ) }
value элемента input свойство name, а метод обработчика событий onChange - handleNameChange - запускается каждый раз, когда мы вводим некоторые данные в элемент input, и он обновляет свойство name с помощью метода setName, так что мы продолжаем синхронизировать значение с состоянием react.
handleSubmit используется для отправки формы.
Элемент select
<select> помогает нам создать выпадающий список. Давайте посмотрим на пример того, как создать выпадающий список и обрабатывать данные.
Здесь мы создали выпадающий список фреймворков в элементеimport React,{useState} from 'react'; function FormSelect() { // начальное значение состояния - строка 'react' const [framework, setFramework] = useState('react'); function handleChange(e){ setFramework(e.target.value); }; function handleSubmit(e){ e.preventDefault(); console.log(framework); }; return ( <form onSubmit={handleSubmit}> <h2>Choose your framework</h2> <select onChange={handleChange} value={framework}> <option value="react">React</option> <option value="angular">Angular</option> <option value="vue">Vue</option> </select> <button type="submit">Submit</button> </form> ); }
<select> мы установили атрибут value для свойства framework и добавили обработчик событий onChange.
Вложенные элементы <option> содержат атрибут value, который содержит данные, так что всякий раз, когда мы выбираем конкретный параметр, вызывается метод handleChange и изменяет значение свойства framework значением атрибута <option>.
Вы видели, что элемент select также следует аналогичному шаблону, как и элемент input, так почему бы нам не создать пользовательский хук и повторно использовать его в каждом элементе формы?
Создание пользовательских хуков для обработки формы
Здесь мы создали пользовательский хук под названиемimport React, {useState} from 'react'; function useInput(initialValue) { const [value,setValue] = useState(initialValue); function handleChange(e) { setValue(e.target.value); } return [value,handleChange]; }
useInput, давайте его применим.
Использование пользовательского хука useInput()
Теперь наш компонентfunction LoginForm(){ const [email, setEmail] = useInput(''); const [password, setPassword] = useInput(''); function handleSubmit(e){ e.preventDefault(); console.log(email,password) } return ( <form onSubmit={handleSubmit}> <input placeholder="Email" type="email" value={email} onChange={setEmail}/> <input placeholder="password" type="password" value={password} onChange={setPassword}/> <button>Submit</button> </form> ) }
LoginForm выглядит намного чище с помощью пользовательского хука useInput(). Точно так же мы можем использовать наш хук useInput с другими элементами формы.
Пример с Radio button
function RadioButtons() { const [data] = useState({male:"male",female:"female",other:"other"}) const [gender, setGender] = useInput(""); function handleSubmit(e) { e.preventDefault(); console.log(gender); } return ( <form onSubmit={handleSubmit}> <h1>Select Your Gender</h1> <div> <input type="radio" id={data.male} value={data.male} checked={data.male === gender} onChange={setGender}/> <label htmlFor={data.male}>Male</label> </div> <div> <input type="radio" id={data.female} value={data.female} checked={data.female === gender} onChange={setGender}/> <label htmlFor={data.female}>Female</label> </div> <div> <input type="radio" id={data.other} value={data.other} checked={data.other === gender} onChange={setGender}/> <label htmlFor={data.other}>Other</label> </div> <button>submit</button> </form> ) }
Пример элемента Textarea
function Comments() { const [comment, setComment] = useInput(""); function handleSubmit(e) { e.preventDefault(); console.log(comment); } return( <form onSubmit={handleSubmit}> <textarea value={comment} onChange={setComment}/> <button>submit</button> </form> ) }
Продвинутое использование функций обратного вызова в React
год назад·4 мин. на чтение
В этой статье мы рассмотрим некоторые продвинутые функций обратного вызова (колбэк функции) в React, которые помогут вам создавать более эффективные и отзывчивые приложения. В частности, мы рассмотрим мемоизацию, debounce и throttle, а также разберем реальные примеры реализации этих методов в вашем коде.
Продвинутое использование функций обратного вызова являются неотъемлемой частью создания производительных и масштабируемых приложений, и это особенно актуально в разработке React приложений. Senior React разработчику важно иметь глубокое понимание продвинутых практик и того, как эффективно применять их в приложениях React.
К концу этой статьи вы будете иметь четкое представление об этих передовых методах обратного вызова и сможете использовать их в своих собственных приложениях React для повышения производительности и пользовательского опыта.
Что такое функции обратного вызова (callback, колбэк)?
Функция обратного вызова — это функция, которая передается в качестве аргумента другой функции и выполняется позже. Обратные вызовы используются для обработки асинхронного кода, например ожидания извлечения данных с сервера или обработки событий пользовательского ввода. В React обратные вызовы широко используются для обработки взаимодействия с пользователем и обновления состояния приложения. Например, когда пользователь нажимает кнопку, запускается функция обратного вызова для обработки события клика и соответствующего обновления состояния приложения.Пример простой функции обратного вызова
Вот базовый пример использования обратного вызова в React:В этом примере мы создадим классimport React from 'react'; class MyComponent extends React.Component { handleClick() { console.log('Button clicked'); } render() { return ( <button onClick={this.handleClick}>Click me</button> ); } }
MyComponent, который расширяет класс React.Component. Мы определяем метод handleClick, который пишет сообщение в консоли при нажатии кнопки. Затем мы рендерим элемент button с атрибутом onClick, который задается методом handleClick.
Этот пример представляет собой простую демонстрацию того, как обратные вызовы могут использоваться в React для обработки взаимодействий с пользователем.
Продвинутые функции обратного вызова
Теперь, когда мы рассмотрели основы обратных вызовов в React, давайте рассмотрим некоторые продвинутые функции обратного вызова, которые могут помочь senior инженерам создавать более эффективные и масштабируемые приложения.Мемоизация (memoization)
Мемоизация — это метод, используемый для оптимизации производительности функции путем кэширования ее результатов на основе входных параметров. Это может помочь уменьшить количество вызовов функции и повысить производительность приложения. В React запоминание можно использовать для оптимизации производительности компонентов, которые часто повторно рендерятся. Кэшируя результаты функции, мы можем избежать дорогостоящих вычислений, которые повторяются каждый раз при повторном рендеринге компонента. Вот пример того, как использовать мемоизацию в React:В этом примере мы используем хукimport React, { useMemo } from 'react'; function MyComponent(props) { const result = useMemo(() => { // Дорогостоящее вычисление return props.data.map(item => item * 2); }, [props.data]); return ( <div>{result}</div> ); }
useMemo для запоминания результата дорогостоящих вычислений. Хук принимает два аргумента: функцию, которая выполняет дорогостоящие вычисления, и массив зависимостей, которые запускают вычисления при их изменении.
Используя хук useMemo, мы можем избежать дорогостоящих вычислений, когда массив props.data не изменяется.
Debounce
Debounce — это метод, используемый для предотвращения вызова функции несколько раз за короткий период времени. Это может помочь повысить производительность приложения и уменьшить количество ненужных вызовов функции. В React debounce можно использовать для обработки событий пользовательского ввода, таких как ввод в поле поиска. Применяя debounce для функции, которая обрабатывает событие ввода, мы можем избежать ненужных вызовов функции и повысить производительность приложения. Вот пример того, как использовать отмену в React:В этом примере мы используем библиотекуimport React, { useState, useEffect } from 'react'; import debounce from 'lodash.debounce'; function MyComponent() { const [searchQuery, setSearchQuery] = useState(''); useEffect(() => { const debouncedSearch = debounce(handleSearch, 500); document.addEventListener('keyup', debouncedSearch); return () => { document.removeEventListener('keyup', debouncedSearch); }; }, []); function handleSearch() { // Имитация вызова API console.log('Searching for:', searchQuery); } function handleChange(event) { setSearchQuery(event.target.value); } return ( <div> <input type="text" onChange={handleChange} /> </div> ); }
lodash.debounce для отмены debounce’а функции handleSearch. Мы добавляем прослушиватель событий к объекту документа для события keyup, которое запускает функцию с debounce’ом. Мы также удаляем прослушиватель событий при размонтировании компонента, чтобы избежать утечек памяти.
Применив debounce к функции handleSearch, мы можем предотвратить ее многократный вызов за короткий промежуток времени, что может помочь повысить производительность приложения.
Throttle
Throttle — это метод, используемый для ограничения количества вызовов функции за заданный период времени. Это может помочь повысить производительность приложения и уменьшить количество ненужных вызовов функции. В React throttle можно использовать для обработки событий пользовательского ввода, таких как прокрутка или изменение размера окна. Регулируя функцию, обрабатывающую входное событие, мы можем избежать ненужных вызовов функции и повысить производительность приложения. Вот пример использования throttle в React:В этом примере мы используем библиотекуimport React, { useState, useEffect } from 'react'; import throttle from 'lodash.throttle'; function MyComponent() { const [scrollPosition, setScrollPosition] = useState(0); useEffect(() => { const throttledScroll = throttle(handleScroll, 500); window.addEventListener('scroll', throttledScroll); return () => { window.removeEventListener('scroll', throttledScroll); }; }, []); function handleScroll() { const position = window.pageYOffset; setScrollPosition(position); } return ( <div> <p>Scroll position: {scrollPosition}</p> <div style={{ height: '2000px' }}> Content here </div> </div> ); };
lodash.throttle для throttle'а функции handleScroll. Мы добавляем прослушиватель событий к объекту окна для события scroll, которое запускает функцию регулирования. Мы также удаляем прослушиватель событий при размонтировании компонента, чтобы избежать утечек памяти.
Применив throttle на функцию handleScroll, мы можем ограничить количество вызовов за заданный период времени, что может помочь повысить производительность приложения.
