ChatGPT на русском языке, бесплатноНовости и обновления в Telegram
На sponsr есть решения ваших задач
Полезные видео о фронтенде. Подпишись на Rutube
Как передать компонент в качестве пропса в React
год назад·4 мин. на чтение
Существует множество способов передать компонент в качестве пропса
Существует множество способов передать компонент в качестве пропса, например, специальный проп
Все верно, но что произойдет, если мы будем иметь дело с компонентом
children
, и паттерн render prop. О них вы можете узнать в видео “Паттерн Render Props в ReactJS”.
В случае с render props мы передаем функцию, которая возвращает компонент. В этой статье рассмотрим как передать просто компонент в качестве пропса.
В этой статье мы увидим простую технику, которая позволяет писать удобные настраиваемые компоненты с помощью простых API, просто используя основные строительные блоки React - компоненты.
Опытный React разработчик использует эту технику естественным образом, но новичку сложно понять этот механизм.
Переизбыток пропсов
Иногда в компонент приходится передавать огромное количество пропсов для того чтобы настроить более мелкие вложенные компоненты, из которых состоит ваш компонент. Возникает переизбыток пропсов. Давайте посмотрим на это на примере. Предположим, есть компонентAlert
с Button
внутри.
Что вы можете сделать, чтобы настроить внутреннийconst Button = ({ onClick, children }) => <button onClick={onClick}>{children}</button>; const Alert = ({ children, onAccept }) => ( <div className="alert"> <div className="alert-header"> <h1>Alert!</h1> </div> <div className="alert-content">{children}</div> <div className="alert-footer"> <Button onClick={onAccept}>Ok</Button> </div> </div> ); <Alert onAccept={() => {}}>Attention!</Alert>
Button
? Если вы новичок в React вы, вероятно, думаете, что правильный способ - это передать проп.
const Alert = ({ children, acceptMessage = "Ok", onAccept }) => ( <div className="alert"> <div className="alert-header"> <h1>Alert!</h1> </div> <div className="alert-content">{children}</div> <div className="alert-footer"> <Button onClick={onAccept}>{acceptMessage}</Button> </div> </div> ); <Alert acceptMessage="Understood!" onAccept={() => {}}> Attention! </Alert>
Confirm
с двумя кнопками? Вам нужно дублировать пропсы и иметь некоторые префиксы, чтобы избежать конфликтов имен пропсов.
Как вы можете себе представить, это будет только ухудшаться по мере роста вашего компонента. Это то, что я имел в виду под переизбытком пропсов.const Confirm = ({ children, acceptMessage = "Ok", rejectMessage = "Cancel", onAccept, onReject }) => ( <div className="confirm"> <div className="confirm-header"> <h1>Confirm</h1> </div> <div className="confirm-content">{children}</div> <div className="confirm-footer"> <Button onClick={onAccept}>{acceptMessage}</Button> <Button onClick={onReject}>{rejectMessage}</Button> </div> </div> ); <Confirm acceptMessage="Yep" rejectMessage="Nope" onAccept={() => {}} onReject={() => {}}> You sure? </Confirm>
Улучшение. Вложенные пропсы
Один из способов немного привести код в порядок — вложить пропсы: по одному пропсу для каждого внутреннего компонента с необходимыми ключами.Это исправляет конфликты, но все становится сложнее. Что произойдет, если я захочу переопределить только один вложенный проп? Чтобы сделать это, нам нужно вручную объединить пропсы со значениями по умолчанию. И что произойдет, еслиconst Confirm = ({ children, onAccept, onReject, acceptButton = { message: "Ok", className: "accept-btn", }, rejectButton = { message: "Cancel", className: "cancel-btn", }, }) => ( <div className="confirm"> <div className="confirm-header"> <h1>Confirm</h1> </div> <div className="confirm-content">{children}</div> <div className="confirm-footer"> <Button className={acceptButton.className} onClick={onAccept}> {acceptButton.message} </Button> <Button className={rejectButton.className} onClick={onReject}> {rejectButton.message} </Button> </div> </div> ); <Confirm acceptButton={{ message: "Yep", className: "accept-btn" }} rejectButton={{ message: "Nope", className: "reject-btn" }} onAccept={() => {}} onReject={() => {}} > You sure? </Confirm>
Button
также содержит Icon
? Следует ли использовать пару новых пропсов (acceptButtonIcon
, rejectButtonIcon
)? Должны ли вы вкладывать их в существующие пропсы (acceptButton.icon
)? Типы или prop types будет очень сложно читать.
Другой подход. Render props
Render props это один из способов сделать ваши компоненты действительно настраиваемыми, вместо того, чтобы добавлять массу пропсов. Давайте попробуем. Напишем три разные версии компонентаConfirm
, который принимает рендер пропсы.
Версия 1. По одному рендер пропсу для каждой кнопки
В первой версии в компонентеConfirm
добавим по одному рендер пропсу для каждой кнопки:
const Confirm = ({ children, onAccept, onReject, renderAcceptButton = onAccept => ( <Button className="accept-btn" onClick={onAccept}> OK </Button> ), renderRejectButton = onReject => ( <Button className="reject-btn" onClick={onReject}> Cancel </Button> ), }) => ( <div className="confirm"> <div className="confirm-header"> <h1>Confirm</h1> </div> <div className="confirm-content">{children}</div> <div className="confirm-footer"> {renderAcceptButton(onAccept)} {renderRejectButton(onReject)} </div> </div> ); <Confirm renderAcceptButton={onAccept => ( <Button className="accept-btn" onClick={onAccept}> Yep </Button> )} renderRejectButton={onReject => ( <Button className="cancel-btn" onClick={onReject}> Nope </Button> )} > You sure? </Confirm>
Версия 2. Один рендер проп для всех кнопок
Вторая версия - это один рендер проп для всех кнопок.const Confirm = ({ children, onAccept, onReject, renderButtons = (onAccept, onReject) => ( <> <Button className="accept-btn" onClick={onAccept}> OK </Button> <Button className="reject-btn" onClick={onReject}> Cancel </Button> </> ), }) => ( <div className="confirm"> <div className="confirm-header"> <h1>Confirm</h1> </div> <div className="confirm-content">{children}</div> <div className="confirm-footer">{renderButtons(onAccept, onReject)}</div> </div> ); <Confirm renderButtons={(onAccept, onReject) => ( <> <Button className="accept-btn" onClick={onAccept}> Yep </Button> <Button className="cancel-btn" onClick={onReject}> Nope </Button> </> )} > You sure? </Confirm>
Версия 3. Один рендер проп для всех подкомпонентов
И, наконец, рендер проп для всего компонента:Последний вариант своего рода крайность. Рендер пропсы настолько мощный, насколько это возможно, но он также имеет свои нюансы. Они позволяют изменить способ рендеринга компонента, но повторно использовать «значения по умолчанию» непросто. Это зависит от того, что визуализирует ваш рендер проп. В предыдущих примерах мы видели три варианта, каждый из которых обеспечивает большую гибкость, но меньшую возможность повторного использования «значений по умолчанию». Однако этот подход может показаться излишним, когда мы просто хотим настроить текст кнопокconst Confirm = ({ children, onAccept, onReject, render = (onAccept, onReject, children) => ( <div className="confirm"> <div className="confirm-header"> <h1>Confirm</h1> </div> <div className="confirm-content">{children}</div> <div className="confirm-footer"> <Button className="accept-btn" onClick={onAccept}> OK </Button> <Button className="reject-btn" onClick={onReject}> Cancel </Button> </div> </div> ), }) => render(onAccept, onReject, children); <Confirm render={() => { // компонент, который появится внутри `Confirm` }} > You sure? </Confirm>
Alert
/Confirm
.
Просто передать компонент
Этот API гораздо более естественен. Это один из тех случаев, когдаconst Confirm = ({ children, onAccept, onReject, acceptButton = <Button>Ok</Button>, rejectButton = <Button>Cancel</Button>, }) => ( <div className="confirm"> <div className="confirm-header"> <h1>Confirm</h1> </div> <div className="confirm-content">{children}</div> <div className="confirm-footer"> {React.cloneElement(acceptButton, { className: "accept-btn", onClick: onAccept })} {React.cloneElement(rejectButton, { className: "reject-btn", onClick: onReject })} </div> </div> ); <Confirm acceptButton={<Button>Yep</Button>} rejectButton={<Button>Nope</Button>} onAccept={() => {}} onReject={() => {}} > You sure? </Confirm>
cloneElement
является правильным инструментом.
Если вам интересно, почему мы всегда передаем обработчики, когда в некоторых случаях имеет смысл просто использовать их напрямую, вы правы. В данном случае это не обязательно.
<Confirm acceptButton={<Button onAccept={() => {}}>Yep</Button>} rejectButton={<Button onReject={() => {}}>Nope</Button>} > You sure? </Confirm>
Состояние как снимок в React
10 месяцев назад·5 мин. на чтение
Переменные состояния могут выглядеть как обычные переменные JavaScript, которые вы можете читать и записывать. Однако состояние в React больше похоже на снимок. Его установка не изменяет уже имеющуюся у вас переменную состояния, а вместо этого запускает повторный рендеринг.
Содержание туториала по React
Переменные состояния могут выглядеть как обычные переменные JavaScript, которые вы можете читать и записывать. Однако состояние больше похоже на снимок. Его установка не изменяет уже имеющуюся у вас переменную состояния, а вместо этого запускает повторный рендеринг.
Вот небольшой эксперимент, чтобы показать вам, как это работает. В этом примере вы можете ожидать, что нажатие кнопки «+3» увеличит счетчик на три, потому что он вызывается
Вот что обработчик нажатия этой кнопки сообщает React:
Вот пример того, как это делает ваши обработчики событий менее подверженными ошибкам синхронизации. Ниже представлена форма, которая отправляет сообщение с пятисекундной задержкой. Представьте себе этот сценарий:
Установка состояния запускает рендеринг
Вы можете думать о своем пользовательском интерфейсе как об изменении непосредственно в ответ на пользовательское событие, такое как клик. В React это работает немного иначе, чем эта ментальная модель. На предыдущей странице вы видели, что изменение состояния запрашивает повторный рендеринг. Это означает, что для того, чтобы интерфейс отреагировал на событие, вам необходимо обновить состояние. В этом примере, когда вы нажимаете "send",setIsSent(true)
сообщает React повторно отобразить пользовательский интерфейс:
Вот что происходит, когда вы нажимаете кнопку:import { useState } from 'react'; export default function Form() { const [isSent, setIsSent] = useState(false); const [message, setMessage] = useState('Hi!'); if (isSent) { return <h1>Your message is on its way!</h1>; } return ( <form onSubmit={(e) => { e.preventDefault(); setIsSent(true); sendMessage(message); }} > <textarea placeholder="Message" value={message} onChange={(e) => setMessage(e.target.value)} /> <button type="submit">Send</button> </form> ); } function sendMessage(message) { // ... }
- Выполняется обработчик события
onSubmit
. setIsSent(true)
устанавливаетisSent
вtrue
и кладет в очередь новый рендеринг.- React повторно отображает компонент в соответствии с новым значением
isSent
.
Рендеринг делает снимок во времени
"Рендеринг" означает, что React вызывает ваш компонент, который является функцией. JSX, который вы возвращаете из этой функции, подобен снимку пользовательского интерфейса в момент времени. Его пропсы, обработчики событий и локальные переменные были рассчитаны с использованием его состояния во время рендеринга. В отличие от фотографии или кадра фильма, "снимок" пользовательского интерфейса, который вы возвращаете, является интерактивным. Он включает в себя логику, такую как обработчики событий, которые определяют, что происходит в ответ на входные данные. Затем React обновляет экран в соответствии с этим снимком и подключает обработчики событий. В результате нажатие кнопки вызовет обработчик кликов из вашего JSX. Когда React перерисовывает компонент:- React снова вызывает вашу функцию.
- Ваша функция возвращает новый снимок JSX.
- Затем React обновляет экран в соответствии со снимком, который вы вернули.
setNumber(number + 1)
три раза.
Посмотрите, что происходит, когда вы нажимаете кнопку «+3»:
Обратите внимание, чтоimport { useState } from 'react'; export default function Counter() { const [number, setNumber] = useState(0); return ( <> <h1>{number}</h1> <button onClick={() => { setNumber(number + 1); setNumber(number + 1); setNumber(number + 1); }} > +3 </button> </> ); }
number
увеличивается только один раз за клик!
Установка состояния изменяет его только для следующего рендера. Во время первого рендера number
было 0
. Вот почему в обработчике этого рендеринга onClick
значение number
по-прежнему остается 0
даже после вызова setNumber(number + 1)
:
<button onClick={() => { setNumber(number + 1); setNumber(number + 1); setNumber(number + 1); }} > +3 </button>
setNumber(number + 1)
:number
равно0
таким образомsetNumber(0 + 1)
.- React готовится изменить
number
на1
в следующем рендеринге.
- React готовится изменить
setNumber(number + 1)
:number
равно0
таким образомsetNumber(0 + 1)
.- React готовится изменить
number
на1
в следующем рендеринге.
- React готовится изменить
setNumber(number + 1)
:number
равно0
таким образомsetNumber(0 + 1)
.- React готовится изменить
number
на1
в следующем рендеринге.
- React готовится изменить
setNumber(number + 1)
три раза, в этом рендере обработчик событий number
всегда равен 0
, поэтому вы устанавливаете состояние 1
три раза. Вот почему после завершения обработчика событий React повторно отображает компонент с number
равным 1
, а не 3
.
Вы также можете визуализировать это, мысленно заменяя переменные состояния их значениями в своем коде. Поскольку number
переменная состояния равна 0
для этого рендера, его обработчик событий выглядит так:
Для следующего рендера<button onClick={() => { setNumber(0 + 1); setNumber(0 + 1); setNumber(0 + 1); }} > +3 </button>
number
равен 1
, так что обработчик клика этого рендера выглядит так:
Вот почему повторное нажатие на кнопку установит счетчик на<button onClick={() => { setNumber(1 + 1); setNumber(1 + 1); setNumber(1 + 1); }} > +3 </button>
2
, затем 3
на следующий клик и т.д.
Состояние с течением времени
Попробуйте угадать, какое сообщение будет выведено вalert
при нажатии этой кнопки:
Если вы используете метод замены из предыдущего, вы можете догадаться, что предупреждение покажетimport { useState } from 'react'; export default function Counter() { const [number, setNumber] = useState(0); return ( <> <h1>{number}</h1> <button onClick={() => { setNumber(number + 5); alert(number); }} > +5 </button> </> ); }
0
:
Но что, если положитеsetNumber(0 + 5); alert(0);
alert
в таймер, чтобы оно срабатывало только после повторного рендеринга компонента? Будет ли он показывать 0
или 5
?
Если вы используете метод подстановки, вы можете увидеть «снимок» состояния, переданного вimport { useState } from 'react'; export default function Counter() { const [number, setNumber] = useState(0); return ( <> <h1>{number}</h1> <button onClick={() => { setNumber(number + 5); setTimeout(() => { alert(number); }, 3000); }} > +5 </button> </> ); }
alert
.
Состояние, хранящееся в React, могло измениться к моменту запуска оповещения, но оно было запланировано с использованием снимка состояния на момент взаимодействия с ним пользователя. Значение переменной состояния никогда не изменяется в процессе рендеринга, даже если код обработчика событий является асинхронным. ВнутриsetNumber(0 + 5); setTimeout(() => { alert(0); }, 3000);
onClick
этого рендера значение number
продолжает оставаться 0
даже после вызова setNumber(number + 5)
. Его значение было «фиксировано», когда React «сделал снимок» пользовательского интерфейса, вызвав ваш компонент.
- Вы нажимаете кнопку «Отправить», отправляя «Привет» Алисе.
- Прежде чем закончится пятисекундная задержка, вы измените значение поля «Кому» на «Боб».
alert
? Будет ли он отображать «Вы поздоровались с Алисой»? Или он будет отображать «Вы поздоровались с Бобом»? Сделайте предположение, основанное на том, что вы знаете:
React сохраняет значения состояния «фиксированными» в обработчиках событий одного рендеринга. Вам не нужно беспокоиться о том, изменилось ли состояние во время выполнения кода. Но что, если вы хотите прочитать последнее состояние перед повторным рендерингом? Вы захотите использовать функцию обновления состояния, описанную на следующей странице.import { useState } from 'react'; export default function Form() { const [to, setTo] = useState('Alice'); const [message, setMessage] = useState('Hello'); function handleSubmit(e) { e.preventDefault(); setTimeout(() => { alert(`You said ${message} to ${to}`); }, 5000); } return ( <form onSubmit={handleSubmit}> <label> To:{' '} <select value={to} onChange={(e) => setTo(e.target.value)}> <option value="Alice">Alice</option> <option value="Bob">Bob</option> </select> </label> <textarea placeholder="Message" value={message} onChange={(e) => setMessage(e.target.value)} /> <button type="submit">Send</button> </form> ); }
Резюме
- Состояние установки запрашивает новый рендеринг.
- React хранит состояние вне вашего компонента, как на полке.
- Когда вы вызываете
useState
, React дает вам снимок состояния для этого рендеринга . - Переменные и обработчики событий не «выживают» при повторном рендеринге. Каждый рендер имеет свои обработчики событий.
- Каждый рендер (и функции внутри него) всегда будет «видеть» снимок состояния, которое React дал этому рендеру.
- Вы можете мысленно заменить состояние в обработчиках событий, подобно тому, как вы думаете об отрендеренном JSX.
- Обработчики событий, созданные в прошлом, имеют значения состояния из рендеринга, в котором они были созданы.