ChatGPT на русском языке, бесплатноНовости и обновления в Telegram
На sponsr есть решения ваших задач
Полезные видео о фронтенде. Подпишись на Rutube
Какую структуру состояния React выбрать
10 месяцев назад·12 мин. на чтение
Компонент с хорошо структурированным состоянием приятно модифицировать и легко отлаживать. В этой статье вы найдете советы, которые следует учитывать при структурировании состояния в React компонентах.
Содержание туториала по React
Компонент с хорошо структурированным состоянием приятно модифицировать и легко отлаживать. В этой статье вы найдете советы, которые следует учитывать при структурировании состояния.
Другой случай, когда вы будете группировать данные в объект или массив, — это когда вы не знаете, сколько различных частей состояния вам понадобится. Например, когда у вас есть форма, в которой пользователь может добавлять настраиваемые поля.
Если ваша переменная состояния является объектом, помните, что вы не можете обновить в ней только одно поле без явного копирования других полей. Например, вы не можете использовать
Хотя этот код работает, в нем могут возникнуть «невозможные» состояний. Например, если вы забудете вызвать
Эта форма имеет три переменные состояния:
В настоящее время он сохраняет выбранный элемент как объект в переменной состояния
Обратите внимание, что если вы сначала нажмете «Выбрать» на элементе, а затем отредактируете его, ввод обновится, но метка внизу не отразит изменения. Это потому, что вы дублировали состояние и забыли обновить
В качестве альтернативы вы можете хранить выбранный индекс в состоянии.
Раньше состояние дублировалось так:
Теперь предположим, что вы хотите добавить кнопку для удаления места, которое вы уже посетили. Как бы вы это сделали? Обновление вложенного состояния включает в себя создание копий объектов от той части, которая была изменена. Удаление глубоко вложенного места потребует копирования всей его родительской цепочки мест. Такой код может быть очень многословным.
Если состояние слишком вложенное, чтобы его можно было легко обновить, подумайте о том, чтобы сделать его «плоским». Вот один из способов реструктуризации этих данных. Вместо древовидной структуры, в которой каждое место имеет массив своих дочерних мест, вы можете сделать так, чтобы каждое место содержало массив идентификаторов своих дочерних мест. Затем вы можете сохранить сопоставление каждого идентификатора места с соответствующим местом.
Эта реструктуризация данных может напомнить вам таблицу базы данных:
Теперь, когда состояние «плоское» (также известное как «нормализованное»), обновление вложенных элементов становится проще.
Чтобы удалить место сейчас, вам нужно всего лишь обновить два уровня состояния:
Иногда вы также можете уменьшить вложенность состояний, переместив часть вложенных состояний в дочерние компоненты. Это хорошо работает для временного состояния пользовательского интерфейса, которое не нужно сохранять, например, наведен ли элемент.
Принципы структурирования состояния
Когда вы пишете компонент, который содержит какое-то состояние, вам придется выбирать, сколько переменных состояния использовать и какой должна быть форма их данных. Хотя можно писать правильные программы даже с неоптимальной структурой состояний, есть несколько принципов, которые помогут вам сделать правильный выбор:- Состояние, связанное с группой. Если вы всегда одновременно обновляете две или более переменных состояния, рассмотрите возможность их объединения в одну переменную состояния.
- Избегайте противоречий в состоянии. Когда состояние структурировано таким образом, что несколько частей состояния могут противоречить и «не согласовываться» друг с другом, вы оставляете место для ошибок. Постарайтесь избежать этого.
- Избегайте избыточного состояния. Если вы можете вычислить некоторую информацию из пропсов компонента или его существующих переменных состояния во время рендеринга, вы не должны помещать эту информацию в состояние этого компонента.
- Избегайте дублирования состояния. Когда одни и те же данные дублируются между несколькими переменными состояния или внутри вложенных объектов, их сложно синхронизировать. Уменьшайте дублирование, если возможно.
- Избегайте глубоко вложенных состояний. Глубоко иерархическое состояние не очень удобно обновлять. По возможности предпочтительнее структурировать состояние в плоском виде.
Состояние, связанное с группой
Иногда вы можете быть не уверены, использовать одну или несколько переменных состояния. Должны ли вы это сделать так?Или так?const [x, setX] = useState(0); const [y, setY] = useState(0);
Технически вы можете использовать любой из этих подходов. Но если какие-то две переменные состояния всегда изменяются вместе, было бы неплохо объединить их в одну переменную состояния. Тогда вы не забудете всегда синхронизировать их, как в этом примере, где перемещение курсора обновляет обе координаты красной точки:const [position, setPosition] = useState({ x: 0, y: 0 });
import { useState } from 'react'; export default function MovingDot() { const [position, setPosition] = useState({ x: 0, y: 0, }); return ( <div onPointerMove={(e) => { setPosition({ x: e.clientX, y: e.clientY, }); }} style={{ position: 'relative', width: '100vw', height: '100vh', }} > <div style={{ position: 'absolute', backgroundColor: 'red', borderRadius: '50%', transform: `translate(${position.x}px, ${position.y}px)`, left: -10, top: -10, width: 20, height: 20, }} /> </div> ); }
setPosition({ x: 100 })
в приведенном выше примере, потому что у него вообще не будет свойства y
. Вместо этого, если вы хотите установить только x
, вы должны либо выполнить setPosition({ ...position, x: 100})
, либо разделить их на две переменные состояния и выполнить setX(100)
.
Избегайте противоречий в состоянии
Вот форма обратной связи отеля с переменными состоянияisSending
и isSent
:
import { useState } from 'react'; export default function FeedbackForm() { const [text, setText] = useState(''); const [isSending, setIsSending] = useState(false); const [isSent, setIsSent] = useState(false); async function handleSubmit(e) { e.preventDefault(); setIsSending(true); await sendMessage(text); setIsSending(false); setIsSent(true); } if (isSent) { return <h1>Thanks for feedback!</h1>; } return ( <form onSubmit={handleSubmit}> <p>How was your stay at The Prancing Pony?</p> <textarea disabled={isSending} value={text} onChange={(e) => setText(e.target.value)} /> <br /> <button disabled={isSending} type="submit"> Send </button> {isSending && <p>Sending...</p>} </form> ); } // Имитация отправки сообщения. function sendMessage(text) { return new Promise((resolve) => { setTimeout(resolve, 2000); }); }
setIsSent
и setIsSending
вместе, вы можете оказаться в ситуации, когда и isSending
, и isSent
одновременно имеют значение true
. Чем сложнее ваш компонент, тем сложнее будет понять, что произошло.
Поскольку isSending
и isSent
никогда не должны принимать значение true
одновременно, лучше заменить их одной переменной состояния, которая может принимать одно из трех допустимых состояний: «ввод» (typing), «отправка» (sending) и «отправлено» (sent):
Вы также можете объявить некоторые константы для удобства чтения:import { useState } from 'react'; export default function FeedbackForm() { const [text, setText] = useState(''); const [status, setStatus] = useState('typing'); async function handleSubmit(e) { e.preventDefault(); setStatus('sending'); await sendMessage(text); setStatus('sent'); } const isSending = status === 'sending'; const isSent = status === 'sent'; if (isSent) { return <h1>Thanks for feedback!</h1>; } return ( <form onSubmit={handleSubmit}> <p>How was your stay at The Prancing Pony?</p> <textarea disabled={isSending} value={text} onChange={(e) => setText(e.target.value)} /> <br /> <button disabled={isSending} type="submit"> Send </button> {isSending && <p>Sending...</p>} </form> ); } // Имитация отправки сообщения. function sendMessage(text) { return new Promise((resolve) => { setTimeout(resolve, 2000); }); }
Но они не являются переменными состояния, поэтому вам не нужно беспокоиться об их рассинхронизации друг с другом.const isSending = status === 'sending'; const isSent = status === 'sent';
Избегайте избыточного состояния
Если вы можете вычислить некоторую информацию из пропсов компонента или его существующих переменных состояния во время рендеринга, вы не должны помещать эту информацию в состояние этого компонента. Например, рассмотрим такую форму. Он работает, но можете ли вы найти в нем какое-либо избыточное состояние?import { useState } from 'react'; export default function Form() { const [firstName, setFirstName] = useState(''); const [lastName, setLastName] = useState(''); const [fullName, setFullName] = useState(''); function handleFirstNameChange(e) { setFirstName(e.target.value); setFullName(e.target.value + ' ' + lastName); } function handleLastNameChange(e) { setLastName(e.target.value); setFullName(firstName + ' ' + e.target.value); } return ( <> <h2>Let’s check you in</h2> <label> First name: <input value={firstName} onChange={handleFirstNameChange} /> </label> <label> Last name: <input value={lastName} onChange={handleLastNameChange} /> </label> <p> Your ticket will be issued to: <b>{fullName}</b> </p> </> ); }
firstName
, lastName
и fullName
. Однако fullName
является избыточным. Вы всегда можете вычислить fullName
из firstName
и lastName
во время рендеринга, поэтому удалите его из состояния.
Вот как вы можете это сделать:
Здесьimport { useState } from 'react'; export default function Form() { const [firstName, setFirstName] = useState(''); const [lastName, setLastName] = useState(''); const fullName = firstName + ' ' + lastName; function handleFirstNameChange(e) { setFirstName(e.target.value); } function handleLastNameChange(e) { setLastName(e.target.value); } return ( <> <h2>Let’s check you in</h2> <label> First name: <input value={firstName} onChange={handleFirstNameChange} /> </label> <label> Last name: <input value={lastName} onChange={handleLastNameChange} /> </label> <p> Your ticket will be issued to: <b>{fullName}</b> </p> </> ); }
fullName
не является переменной состояния. Вместо этого он вычисляется во время рендеринга:
В результате обработчикам изменений не нужно делать ничего особенного для его обновления. Когда вы вызываетеconst fullName = firstName + ' ' + lastName;
setFirstName
или setLastName
, вы запускаете повторный рендеринг, а затем следующее значение fullName
будет вычислено из свежих данных.
Не отзеркаливайте пропсы в состоянии
Типичным примером избыточного состояния является такой код:Здесь переменная состоянияfunction Message({ messageColor }) { const [color, setColor] = useState(messageColor);
color
инициализируется пропсом messageColor
. Проблема в том, что если родительский компонент позже передаст другое значение messageColor
(например, «красный» вместо «синий»), переменная состояния цвета не будет обновлена. Состояние инициализируется только во время первого рендеринга.
Вот почему «отзеркаливание» некоторых пропсов в переменной состояния может привести к путанице. Вместо этого используйте проп messageColor
непосредственно в коде. Если вы хотите дать ему более короткое имя, используйте константу:
Таким образом, он не будет рассинхронизирован с пропсом, переданным от родительского компонента. «Зеркалирование» пропсов в состояние имеет смысл только в том случае, если вы хотите игнорировать все обновления для определенного пропса. По соглашению начинайте имя пропса сfunction Message({ messageColor }) { const color = messageColor;
initial
или default
, чтобы уточнить, что его новые значения игнорируются:
function Message({ initialColor }) { // Переменная состояния `color` содержит начальное значение `initialColor`. // Последующие изменения пропса `initialColor` игнорируются. const [color, setColor] = useState(initialColor);
Избегайте дублирования состояния
Этот компонент меню позволяет выбрать один перекус из нескольких:import { useState } from 'react'; const initialItems = [ { title: 'pretzels', id: 0 }, { title: 'crispy seaweed', id: 1 }, { title: 'granola bar', id: 2 }, ]; export default function Menu() { const [items, setItems] = useState(initialItems); const [selectedItem, setSelectedItem] = useState(items[0]); return ( <> <h2>What's your travel snack?</h2> <ul> {items.map((item) => ( <li key={item.id}> {item.title}{' '} <button onClick={() => { setSelectedItem(item); }} > Choose </button> </li> ))} </ul> <p>You picked {selectedItem.title}.</p> </> ); }
selectedItem
. Однако это не очень хорошо: содержимое selectedItem
— это тот же объект, что и один из элементов в списке элементов. Это означает, что информация о самом предмете дублируется в двух местах.
Почему это проблема? Давайте сделаем каждый элемент редактируемым:
import { useState } from 'react'; const initialItems = [ { title: 'pretzels', id: 0 }, { title: 'crispy seaweed', id: 1 }, { title: 'granola bar', id: 2 }, ]; export default function Menu() { const [items, setItems] = useState(initialItems); const [selectedItem, setSelectedItem] = useState(items[0]); function handleItemChange(id, e) { setItems( items.map((item) => { if (item.id === id) { return { ...item, title: e.target.value, }; } else { return item; } }) ); } return ( <> <h2>What's your travel snack?</h2> <ul> {items.map((item, index) => ( <li key={item.id}> <input value={item.title} onChange={(e) => { handleItemChange(item.id, e); }} />{' '} <button onClick={() => { setSelectedItem(item); }} > Choose </button> </li> ))} </ul> <p>You picked {selectedItem.title}.</p> </> ); }
selectedItem
.
Хотя вы также можете обновить selectedItem
, более простое решение — удалить дублирование. В этом примере вместо объекта selectedItem
(который создает дублирование объектов внутри элементов) вы сохраняете selectedId
в состоянии, а затем получаете selectedItem
путем поиска в массиве элементов элемента с этим идентификатором:
import { useState } from 'react'; const initialItems = [ { title: 'pretzels', id: 0 }, { title: 'crispy seaweed', id: 1 }, { title: 'granola bar', id: 2 }, ]; export default function Menu() { const [items, setItems] = useState(initialItems); const [selectedId, setSelectedId] = useState(0); const selectedItem = items.find((item) => item.id === selectedId); function handleItemChange(id, e) { setItems( items.map((item) => { if (item.id === id) { return { ...item, title: e.target.value, }; } else { return item; } }) ); } return ( <> <h2>What's your travel snack?</h2> <ul> {items.map((item, index) => ( <li key={item.id}> <input value={item.title} onChange={(e) => { handleItemChange(item.id, e); }} />{' '} <button onClick={() => { setSelectedId(item.id); }} > Choose </button> </li> ))} </ul> <p>You picked {selectedItem.title}.</p> </> ); }
items = [{ id: 0, title: 'pretzels'}, ...]
selectedItem = {id: 0, title: 'pretzels'}
items = [{ id: 0, title: 'pretzels'}, ...]
selectedId = 0
setItems
вызывает повторный рендеринг, а items.find(...)
найдет элемент с обновленным заголовком. Вам не нужно было удерживать выбранный элемент в состоянии, потому что важен только выбранный идентификатор. Остальное можно рассчитать во время рендера.
Избегайте глубоко вложенных состояний
Представьте план путешествия, состоящий из планет, континентов и стран. У вас может возникнуть соблазн структурировать его состояние с помощью вложенных объектов и массивов, как в этом примере:// App.jsx import { useState } from 'react'; import { initialTravelPlan } from './places.js'; function PlaceTree({ place }) { const childPlaces = place.childPlaces; return ( <li> {place.title} {childPlaces.length > 0 && ( <ol> {childPlaces.map((place) => ( <PlaceTree key={place.id} place={place} /> ))} </ol> )} </li> ); } export default function TravelPlan() { const [plan, setPlan] = useState(initialTravelPlan); const planets = plan.childPlaces; return ( <> <h2>Places to visit</h2> <ol> {planets.map((place) => ( <PlaceTree key={place.id} place={place} /> ))} </ol> </> ); }
// places.js export const initialTravelPlan = { id: 0, title: '(Root)', childPlaces: [ { id: 1, title: 'Earth', childPlaces: [ { id: 2, title: 'Africa', childPlaces: [ { id: 3, title: 'Botswana', childPlaces: [], }, { id: 4, title: 'Egypt', childPlaces: [], }, ], }, { id: 5, title: 'Asia', childPlaces: [ { id: 6, title: 'China', childPlaces: [], }, { id: 7, title: 'Hong Kong', childPlaces: [], }, ], }, ], }, { id: 8, title: 'Mars', childPlaces: [ { id: 9, title: 'Corn Town', childPlaces: [], }, { id: 10, title: 'Green Hill', childPlaces: [], }, ], }, ], };
// App.jsx import { useState } from 'react'; import { initialTravelPlan } from './places.js'; function PlaceTree({ id, placesById }) { const place = placesById[id]; const childIds = place.childIds; return ( <li> {place.title} {childIds.length > 0 && ( <ol> {childIds.map((childId) => ( <PlaceTree key={childId} id={childId} placesById={placesById} /> ))} </ol> )} </li> ); } export default function TravelPlan() { const [plan, setPlan] = useState(initialTravelPlan); const root = plan[0]; const planetIds = root.childIds; return ( <> <h2>Places to visit</h2> <ol> {planetIds.map((id) => ( <PlaceTree key={id} id={id} placesById={plan} /> ))} </ol> </> ); }
// places.js export const initialTravelPlan = { 0: { id: 0, title: '(Root)', childIds: [1, 8], }, 1: { id: 1, title: 'Earth', childIds: [2, 5], }, 2: { id: 2, title: 'Africa', childIds: [3, 4], }, 3: { id: 3, title: 'Botswana', childIds: [], }, 4: { id: 4, title: 'Egypt', childIds: [], }, 5: { id: 5, title: 'Asia', childIds: [6, 7], }, 6: { id: 6, title: 'China', childIds: [], }, 7: { id: 7, title: 'Hong Kong', childIds: [], }, 8: { id: 8, title: 'Mars', childIds: [9, 10], }, 9: { id: 9, title: 'Corn Town', childIds: [], }, 10: { id: 10, title: 'Green Hill', childIds: [], }, };
- Обновленная версия родительского места должна исключить удаленный идентификатор из массива
childIds
. - Обновленная версия корневого объекта должна включать обновленную версию родительского места.
Вы можете сколько угодно вкладывать состояния, но если сделать их «плоскими», это может решить множество проблем. Это упрощает обновление состояния и помогает избежать дублирования в разных частях вложенного объекта.// App.jsx import { useState } from 'react'; import { initialTravelPlan } from './places.js'; export default function TravelPlan() { const [plan, setPlan] = useState(initialTravelPlan); function handleComplete(parentId, childId) { const parent = plan[parentId]; // Создаем новую версию родительского места, // которая не включает этот дочерний ID. const nextParent = { ...parent, childIds: parent.childIds.filter((id) => id !== childId), }; // Обновляем состояние корневого объекта... setPlan({ ...plan, // ...чтобы он содержал обновленный объект родителя. [parentId]: nextParent, }); } const root = plan[0]; const planetIds = root.childIds; return ( <> <h2>Places to visit</h2> <ol> {planetIds.map((id) => ( <PlaceTree key={id} id={id} parentId={0} placesById={plan} onComplete={handleComplete} /> ))} </ol> </> ); } function PlaceTree({ id, parentId, placesById, onComplete }) { const place = placesById[id]; const childIds = place.childIds; return ( <li> {place.title} <button onClick={() => { onComplete(parentId, id); }} > Complete </button> {childIds.length > 0 && ( <ol> {childIds.map((childId) => ( <PlaceTree key={childId} id={childId} parentId={id} placesById={placesById} onComplete={onComplete} /> ))} </ol> )} </li> ); }
Улучшение использования памяти
В идеале вы также должны удалить удаленные элементы (и их дочерние элементы) из объекта-таблицы, чтобы оптимизировать использование памяти. Реализация ниже содержит эту логику. Он также использует Immer, чтобы сделать логику обновления более лаконичной.import { useImmer } from 'use-immer'; import { initialTravelPlan } from './places.js'; export default function TravelPlan() { const [plan, updatePlan] = useImmer(initialTravelPlan); function handleComplete(parentId, childId) { updatePlan((draft) => { // Удлаим дочерние ID из родительского `place`. const parent = draft[parentId]; parent.childIds = parent.childIds.filter((id) => id !== childId); // Удалим это место и все его поддерево. deleteAllChildren(childId); function deleteAllChildren(id) { const place = draft[id]; place.childIds.forEach(deleteAllChildren); delete draft[id]; } }); } const root = plan[0]; const planetIds = root.childIds; return ( <> <h2>Places to visit</h2> <ol> {planetIds.map((id) => ( <PlaceTree key={id} id={id} parentId={0} placesById={plan} onComplete={handleComplete} /> ))} </ol> </> ); } function PlaceTree({ id, parentId, placesById, onComplete }) { const place = placesById[id]; const childIds = place.childIds; return ( <li> {place.title} <button onClick={() => { onComplete(parentId, id); }} > Complete </button> {childIds.length > 0 && ( <ol> {childIds.map((childId) => ( <PlaceTree key={childId} id={childId} parentId={id} placesById={placesById} onComplete={onComplete} /> ))} </ol> )} </li> ); }
Резюме
- Если две переменные состояния всегда обновляются вместе, рассмотрите возможность их объединения в одну.
- Тщательно выбирайте переменные состояния, чтобы избежать создания «невозможных» состояний.
- Структурируйте свое состояние таким образом, чтобы уменьшить вероятность того, что вы совершите ошибку при его обновлении.
- Избегайте избыточного и дублирующего состояния, чтобы вам не нужно было синхронизировать его.
- Не помещайте пропсы в состояние, если вы специально не хотите предотвратить обновления.
- Для шаблонов пользовательского интерфейса, таких как выбор, сохраняйте в состоянии не сам объект, а его идентификатор или индекс.
- Если обновление глубоко вложенного состояния затруднено, попробуйте сделать его плоским.
Обработка ввода с состоянием в React
10 месяцев назад·8 мин. на чтение
React использует декларативный способ управления пользовательским интерфейсом. Вместо непосредственного управления отдельными частями пользовательского интерфейса вы описываете различные состояния, в которых может находиться ваш компонент, и переключаетесь между ними в ответ на действия пользователя. Это похоже на то, как дизайнеры думают о пользовательском интерфейсе.
Содержание туториала по React
В этой части руководства по React рассмотрим как реагировать на события ввода. React использует декларативный способ управления пользовательским интерфейсом. Вместо непосредственного управления отдельными частями пользовательского интерфейса вы описываете различные состояния, в которых может находиться ваш компонент, и переключаетесь между ними в ответ на действия пользователя. Это похоже на то, как дизайнеры думают о пользовательском интерфейсе.
Водитель не знают, куда вы хотите поехать, он просто следуют вашим командам. (И если вы ошибетесь, вы окажетесь не в том месте) Это называется императивным подходом, потому что вы должны «командовать» каждым элементом, от счетчика до кнопки, сообщая компьютеру, как обновить пользовательский интерфейс.
В этом примере императивного программирования пользовательского интерфейса форма создается без использования React. Он использует встроенный в браузер DOM:
Императивное управление пользовательским интерфейсом работает достаточно хорошо для отдельных примеров, но в более сложных системах управлять им становится экспоненциально сложнее. Представьте, что вы обновляете страницу, полную различных форм, подобных этой. Добавление нового элемента пользовательского интерфейса или нового взаимодействия потребует тщательной проверки всего существующего кода, чтобы убедиться, что вы не внесли ошибку (например, забыли что-то показать или скрыть).
React был создан, чтобы решить эту проблему.
В React вы не управляете пользовательским интерфейсом напрямую — это означает, что вы не включаете, не отключаете, не показываете и не скрываете компоненты напрямую. Вместо этого вы объявляете, что хотите показать, а React выясняет, как обновить пользовательский интерфейс. Подумайте о том, чтобы сесть в такси и сказать водителю, куда вы хотите ехать, вместо того, чтобы указывать ему, где именно повернуть. Доставить вас туда — работа водителя, и они могут даже знать некоторые короткие пути, о которых вы не подумали.
Шаг 3: Представить состояние в памяти, используя
Далее вам нужно представить визуальные состояния вашего компонента в памяти с помощью
Сравнение декларативного пользовательского интерфейса с императивным
Когда вы проектируете взаимодействия с пользовательским интерфейсом, вы, вероятно, думаете о том, как пользовательский интерфейс изменяется в ответ на действия пользователя. Рассмотрим форму, которая позволяет пользователю отправить ответ:- Когда вы вводите что-то в форму, кнопка «Отправить» становится активной.
- Когда вы нажимаете «Отправить», и форма, и кнопка блокируются, и появляется анимация ожидания.
- Если сетевой запрос выполнен успешно, форма скрывается и появляется сообщение «Спасибо».
- Если сетевой запрос завершается неудачно, появляется сообщение об ошибке, и форма снова становится доступной.
async function handleFormSubmit(e) { e.preventDefault(); disable(textarea); disable(button); show(loadingMessage); hide(errorMessage); try { await submitForm(textarea.value); show(successMessage); hide(form); } catch (err) { show(errorMessage); errorMessage.textContent = err.message; } finally { hide(loadingMessage); enable(textarea); enable(button); } } function handleTextareaChange() { if (textarea.value.length === 0) { disable(button); } else { enable(button); } } function hide(el) { el.style.display = 'none'; } function show(el) { el.style.display = ''; } function enable(el) { el.disabled = false; } function disable(el) { el.disabled = true; } function submitForm(answer) { // Pretend it's hitting the network. return new Promise((resolve, reject) => { setTimeout(() => { if (answer.toLowerCase() == 'istanbul') { resolve(); } else { reject(new Error('Good guess but a wrong answer. Try again!')); } }, 1500); }); } let form = document.getElementById('form'); let textarea = document.getElementById('textarea'); let button = document.getElementById('button'); let loadingMessage = document.getElementById('loading'); let errorMessage = document.getElementById('error'); let successMessage = document.getElementById('success'); form.onsubmit = handleFormSubmit; textarea.oninput = handleTextareaChange;
<!-- index.html --> <form id="form"> <h2>City quiz</h2> <p>What city is located on two continents?</p> <textarea id="textarea"></textarea> <br /> <button id="button" disabled>Submit</button> <p id="loading" style="display: none">Loading...</p> <p id="error" style="display: none; color: red;"></p> </form> <h1 id="success" style="display: none">That's right!</h1> <style> * { box-sizing: border-box; } body { font-family: sans-serif; margin: 20px; padding: 0; } </style>
Декларативный подход к пользовательскому интерфейсу
Вы видели, как императивно реализовать форму выше. Чтобы лучше понять, как мыслить в React, выполним реализацию этого пользовательского интерфейса в React:- Определить различные визуальные состояния компонента
- Определить, что вызывает эти изменения состояния
- Представить состояние в памяти, используя
useState
- Удалить все несущественные переменные состояния
- Подключить обработчики событий для установки состояния
Шаг 1. Определить различные визуальные состояния компонента
В информатике вы могли слышать о «машине состояний» (state machine, стейт машина, конечный автомат), находящейся в одном из нескольких «состояний». Если вы работаете с дизайнером, возможно, вы видели мокапы для разных «визуальных состояний». React стоит на стыке дизайна и информатики, поэтому обе эти идеи являются источниками вдохновения. Во-первых, вам нужно визуализировать все различные «состояния» пользовательского интерфейса, которые может видеть пользователь:- Пусто (
empty
): в форме отключена кнопка «Отправить». - Ввод (
typing
): Форма имеет активную кнопку «Отправить». - Отправка (
submitting
): Форма полностью отключена. Показана анимация ожидания. - Успех (
success
): вместо формы отображается сообщение «Спасибо». - Ошибка (
error
): то же, что и состояние ввода, но с дополнительным сообщением об ошибке.
status
, со значением по умолчанию 'empty'
:
Как отобразить множество визуальных состояний компонента одновременно? Если у компонента много визуальных состояний, как у компонентаexport default function Form({ // Try 'submitting', 'error', 'success': status = 'empty', }) { if (status === 'success') { return <h1>That's right!</h1>; } return ( <> <h2>City quiz</h2> <p> In which city is there a billboard that turns air into drinkable water? </p> <form> <textarea disabled={status === 'submitting'} /> <br /> <button disabled={status === 'empty' || status === 'submitting'}> Submit </button> {status === 'error' && ( <p className="Error">Good guess but a wrong answer. Try again!</p> )} </form> </> ); }
Form
выше, будет удобно показать их все на одной странице.
Такие страницы часто называют «живыми руководствами по стилю» (living styleguides) или storybooks.
Шаг 2. Определить, что вызывает эти изменения состояния
Вы можете запускать обновления состояния в ответ на два типа входных данных:- Ввод пользователя, например нажатие кнопки, ввод в поле, переход по ссылке.
- Входные данные компьютера, такие как получение сетевого ответа, завершение тайм-аута, загрузка изображения.
- Изменение ввода текста (пользователем) должно переключить его из пустого (empty) состояния в состояние ввода (typing) или обратно, в зависимости от того, пусто текстовое поле или нет.
- Нажатие (пользователем) кнопки «Отправить» должно переключить ее в состояние «Отправка» (submitting).
- Успешный сетевой ответ (компьютер) должен перевести его в состояние успеха (success).
- Неудачный сетевой ответ (компьютер) должен перевести его в состояние (error) с соответствующим сообщением об ошибке.
Шаг 3: Представить состояние в памяти, используя useState
Далее вам нужно представить визуальные состояния вашего компонента в памяти с помощью useState
. Ключевым моментом является простота: каждая часть состояния является «движущейся частью», и вам нужно как можно меньше «движущихся частей». Большая сложность приводит к большему количеству ошибок.
Начните с состояния, которое обязательно должно быть. Например, вам нужно сохранить ответ для ввода и ошибку (если она существует) для сохранения последней ошибки:
Затем вам понадобится переменная состояния, представляющая, какое из визуальных состояний, описанных ранее, вы хотите отобразить. Обычно существует более одного способа представить это в памяти, поэтому вам нужно поэкспериментировать с ним. Если вы изо всех сил пытаетесь сразу придумать лучший способ, начните с добавления достаточного количества состояний, чтобы быть уверенным, что охватываются все возможные визуальные состояния:const [answer, setAnswer] = useState(''); const [error, setError] = useState(null);
Ваша первая идея, скорее всего, не будет лучшей, но это нормально — рефакторинг — это часть процесса.const [isEmpty, setIsEmpty] = useState(true); const [isTyping, setIsTyping] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false); const [isSuccess, setIsSuccess] = useState(false); const [isError, setIsError] = useState(false);
Шаг 4. Удалить все несущественные переменные состояния
Вы хотите избежать дублирования в содержании состояния, чтобы отслеживать только то, что необходимо. Потратив немного времени на рефакторинг вашей структуры состояния, вы облегчите понимание своих компонентов, уменьшите дублирование и предотвратите непреднамеренное значение. Ваша цель — предотвратить случаи, когда состояние в памяти не представляет никакого допустимого пользовательского интерфейса, который вы хотели бы видеть пользователю. (Например, вы никогда не хотите показывать сообщение об ошибке и одновременно отключать ввод, иначе пользователь не сможет исправить ошибку.) Вот несколько вопросов, которые вы можете задать про свои переменные состояния:- Вызывает ли это состояние парадокс? Например,
isTyping
иisSubmitting
не могут одновременно быть истинными. Парадокс обычно означает, что состояние недостаточно ограничено. Существует четыре возможных комбинации двух логических значений, но только три соответствуют действительным состояниям. Чтобы удалить невозможное состояние, вы можете объединить их в состояние, которое должно иметь одно из трех значений: «ввод», «отправка» или «успех». - Доступна ли та же информация в другой переменной состояния? Еще один парадокс:
isEmpty
иisTyping
не могут быть истинными одновременно. Делая их отдельными переменными состояния, вы рискуете рассинхронизировать их и вызвать ошибки. К счастью, вы можете удалитьisEmpty
и вместо этого проверитьanswer.length === 0
. - Можно ли получить ту же информацию из инверсии другой переменной состояния?
isError
не нужен, потому что вместо этого вы можете проверитьerror !== null
.
Вы знаете, что они необходимы, потому что вы не можете удалить ни один из них, не нарушив функциональность.const [answer, setAnswer] = useState(''); const [error, setError] = useState(null); const [status, setStatus] = useState('typing'); // 'typing', 'submitting', or 'success'
Как устраненить «невозможные» состояния с помощью редьюсера
Эти три переменные являются достаточно хорошим представлением состояния этой формы. Тем не менее, есть еще некоторые промежуточные состояния, которые не имеют полного смысла. Например, ненулевая ошибка не имеет смысла, когда статус равен «успех». Чтобы точнее смоделировать состояние, вы можете извлечь его в редьюсер. Редьюсеры позволяют объединить несколько переменных состояния в один объект и объединить всю связанную логику.Шаг 5: Подключить обработчики событий для установки состояния
Наконец, создайте обработчики событий для установки переменных состояния. Ниже приведена окончательная форма со всеми подключенными обработчиками событий:Хотя этот код длиннее исходного императивного примера, он намного менее подвержен ошибкам. Выражение всех взаимодействий в виде изменений состояния позволяет позже вводить новые визуальные состояния, не нарушая существующие. Это также позволяет вам изменить то, что должно отображаться в каждом состоянии, не меняя логику самого взаимодействия.import { useState } from 'react'; export default function Form() { const [answer, setAnswer] = useState(''); const [error, setError] = useState(null); const [status, setStatus] = useState('typing'); if (status === 'success') { return <h1>That's right!</h1>; } async function handleSubmit(e) { e.preventDefault(); setStatus('submitting'); try { await submitForm(answer); setStatus('success'); } catch (err) { setStatus('typing'); setError(err); } } function handleTextareaChange(e) { setAnswer(e.target.value); } return ( <> <h2>City quiz</h2> <p> In which city is there a billboard that turns air into drinkable water? </p> <form onSubmit={handleSubmit}> <textarea value={answer} onChange={handleTextareaChange} disabled={status === 'submitting'} /> <br /> <button disabled={answer.length === 0 || status === 'submitting'}> Submit </button> {error !== null && <p className="Error">{error.message}</p>} </form> </> ); } function submitForm(answer) { // Pretend it's hitting the network. return new Promise((resolve, reject) => { setTimeout(() => { let shouldError = answer.toLowerCase() !== 'lima'; if (shouldError) { reject(new Error('Good guess but a wrong answer. Try again!')); } else { resolve(); } }, 1500); }); }
Резюме
- Декларативное программирование означает описание пользовательского интерфейса для каждого визуального состояния, а не микроуправление пользовательским интерфейсом (императивное).
- При разработке компонента:
- Определите все его визуальные состояния.
- Определите триггеры пользователя и компьютера для изменения состояния.
- Смоделируйте состояние с помощью
useState
. - Удалите несущественное состояние, чтобы избежать ошибок и парадоксов.
- Подключите обработчики событий для установки состояния.