Как передать компонент в качестве пропса в React
2 года назад·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>
Собеседование ReactJS - вопросы и ответы
2 года назад·6 мин. на чтение
В этой статье рассмотрим 10 вопросов, которые могут встретиться на собеседовании по ReactJS на позицию React или frontend разработчика.
Подписывайтесь на наш Boosty и задавайте ваши вопросы через форму. Я запишу видео-ответы или статьи, где вы сможете получить быстрый ответ на интересующие именно вас вопросы. Если вы начинающий фронтенд-разработчик, это лучшая возможность получить ответ на вопрос, который вы стеснялись задать коллегам.
А еще на Boosty вас уже ожидают эксклюзивные статьи и видео на актуальные темы.
Итак, теперь рассмотрим вопросы с собеседований:
Что такое
Key - это специальный строковый атрибут, который нужно указывать при создании списка элементов.
Если мы хотим показать компоненты в списке то нужно указать эти ключи явно, чтобы помочь React определять, какие элементы были изменены, добавлены или удалены.
Далее React сопоставляет элементы массива с течением времени.
Если у элемента есть id то лучше всего использовать именно это значение в качестве ключа. В крайнем случае можно использовать индекс элемента как ключ.
Если порядок элементов может поменяться, использовать индексы в качестве ключей крайне не рекомендуется. Это негативно скажется на производительности и может вызвать проблемы с состоянием компонента.
Еще один сценарий использования
Управляемые и неуправляемые компоненты
Элемент называется управляемым, если его значение контролирует React. Эта тема связана с такими HTML элементами как input, textarea, select. Обычно эти элементы сами управляют своим состоянием и сами обновляются когда пользователь вводит данные. Это неуправляемые компоненты - они хранят свои данные прямо в DOM. Чтобы прочитать их значения, используются рефы. Для того чтобы сделать управляемый компонент, нужно чтобы значение этих элементов хранилось именно в состоянии React компонента, т.е. управлялось черезsetState
/useState
, таким образом состояние React-компонента становится единственным источником правды для этих элементов.
// Управляемый компонент import React, { useState } from 'react' export function ControlledInput() { const [name, setName] = useState('') function handleNameChange(event) { setName(event.target.value) } function handleSubmit(event) { event.preventDefault() console.log(name) } return ( <form onSubmit={handleSubmit}> <label> Name: <input type="text" value={name} onChange={handleNameChange} /> </label> <button type="submit">Submit</button> </form> ) }
Исходный код// Неуправляемый компонент import React, { useRef } from 'react' export function UncontrolledInput() { const nameInput = useRef() function handleSubmit(event) { event.preventDefault() console.log(nameInput.current.value) } return ( <form onSubmit={handleSubmit}> <label> Name: <input type="text" ref={nameInput} defaultValue="" /> </label> <button type="submit">Submit</button> </form> ) }
Что такое контекст в React (React Context)?
Контекст позволяет передавать данные через дерево компонентов без необходимости передавать пропсы на промежуточных уровнях. Обычно данные в React-приложении передаются от родителя к дочернему компоненту через пропсы (Как передавать данные между компонентами в ReactJS). Но когда компонентов много или множество компонентов должны быть изменяемы в зависимости от темы - то передавать пропсы для такого случая очень сложно. Для решения этой проблемы можно использовать контекст. Контекст предоставляет способ делиться такими данными между компонентами без необходимости явно передавать пропсы через каждый уровень дерева компонентов. Создаем контекст.Оборачиваем пользователей этого контекста в тег// context.js import { createContext } from 'react' export const Context = createContext()
<Context.Provider />
и передаем внего значения через проп value
.
В компоненте// Component.js import { useState } from 'react' import { Context } from './context' import Parent from './Parent' export const Component = () => { const [name, setName] = useState() return ( <Context.Provider value={{ name, setName }}> <Parent /> </Context.Provider> ) }
Parent
вызываем функцию setName
из контекста.
В компоненте// Parent.js import { useContext } from 'react' import { Context } from './context' import Child from './Child' export const Parent = () => { const { setName } = useContext(Context) const handleNameChange = (event) => { setName(event.target.value) } return ( <> <input type="text" onChange={handleNameChange} /> <Child /> </> ) }
Child
читаем из контекста значение name
.
// Child.js import { useContext } from 'react' import { Context } from './context' export const Child = () => { const { name } = useContext(Context) return ( <span>Name is: {name || '<Not set>'}</span> ) }
Что такое порталы в React?
Порталы позволяют рендерить дочерние элементы в DOM-узел, который находится вне DOM-иерархии родительского компонента. Порталы особенно спасают когда в родительском компоненте заданы стилиoverflow: hidden
или z-index
, и нужно, чтобы дочерний элемент визуально выходил за рамки своего контейнера. Это диалоги, модальные окна или всплывающие подсказки.
Что такое refs в React и в чем их важность?
Рефы дают возможность получить доступ к DOM-узлам или React-компонентам. Ситуации, в которых использование рефов является оправданным:- Управление фокусом, выделение текста или воспроизведение медиа;
- Императивный вызов анимаций;
- Интеграция со сторонними DOM-библиотекам;
- и др.
import React, { useRef } from 'react' export function UncontrolledInput() { const nameInput = useRef() function handleSubmit(event) { event.preventDefault() console.log(nameInput.current.value) } return ( <form onSubmit={handleSubmit}> <input type="text" ref={nameInput} defaultValue="" /> <button type="submit">Submit</button> </form> ) }
Что такое key
в React и в чем их важность?
Key - это специальный строковый атрибут, который нужно указывать при создании списка элементов.
Если мы хотим показать компоненты в списке то нужно указать эти ключи явно, чтобы помочь React определять, какие элементы были изменены, добавлены или удалены.
Далее React сопоставляет элементы массива с течением времени.
Если у элемента есть id то лучше всего использовать именно это значение в качестве ключа. В крайнем случае можно использовать индекс элемента как ключ.
Если порядок элементов может поменяться, использовать индексы в качестве ключей крайне не рекомендуется. Это негативно скажется на производительности и может вызвать проблемы с состоянием компонента.
Еще один сценарий использования key
Render props
Render prop относится к возможность разделять код между компонентами с помощью пропа, значение которого является функцией. Render prop — функция, которая сообщает компоненту, что необходимо рендерить.// Example.jsx import React, { useState } from "react"; import Button from "react-bootstrap/Button"; import { CartIcon } from "./CartIcon/CartIcon"; const renderBadge = (count) => { return ( <div>{count}</div> ); }; export const Example = () => { const [cart, setCart] = useState([]); const handleClick = () => { console.log("Cart Item clicked"); }; return ( <CartIcon renderBadge={() => renderBadge(cart.length)} onClick={handleClick} /> ); };
Исходный код// CartIcon.jsx import React from "react"; import { MdShoppingCart } from "react-icons/md"; export const CartIcon = ({ renderBadge = () => null, onClick }) => { return ( <div onClick={onClick}> <div>{renderBadge()}</div> <MdShoppingCart /> </div> ); };
Что такое Redux?
Redux - это стэйт менеджер для JS приложений. Он может работать не только в React приложениях. Он хранит состояние в дереве объектов внутри единого стора. Единственная возможность изменить состояние - отправить action. Action - это объект, который описывает действие (он отвечает на вопрос: "Что я хочу изменить в состоянии?"). Далее action попадает в reducer, где описано, как состояние должно быть изменено. (reducer отвечает на вопрос: "Как я хочу изменить стэйт?").Как реализовать сайд эффекты в Redux
Сайд эффект - это действие, которые должно произойти на диспатчинг экшена, помимо после сохранения в стор, например, логирование в консоль или отправка запроса на сервер. Основной способ сделать сайд эффект - вызвать его в middleware. Можно написать свой middleware, а можно использовать сторонние библиотеки, например, redux thunk - для синхронных и простых асинхронных действий или redux saga - для сложных асинхронных действий. Можно вызывать сайд эффекты в action сreator'ах. Однако, это не самый лучший способ, т.к. можно задиспатчить действие и без вызова action creator, тогда сайд эффект не сработает.React - реактивен?
Начнем с того, что React-компоненты это функции, которые мы не вызываем на прямую. Эти функции в некоторые моменты возвращают описание того что нужно рендерить. Эти функции вызывает сам React в те самые "некоторые" моменты. И React может отложить этот вызов. React рекурсивно обходит дерево компонентов и может применять оптимизации - и задерживать рендеры чтобы избежать потерю кадров. React в первую это UI фреймворк, и для того чтобы избежать тормозов такие меры оправданы. Т.к. данные могут поступать быстрее чем скорость обновления кадров - есть смысл объединять обновления в пакеты и обновлять пакетами. Поэтому React это скорее «Планировщик», и реактивность не провалятся в React в чистом виде.Что такое синтетические события в React?
SyntheticEvent
это обёртка над нативными событиями. SyntheticEvent
является частью системы событий React.
Ваши обработчики событий получают экземпляр SyntheticEvent, это кроссбраузерная обёртка над нативным экземпляром события. У неё такой же интерфейс, как и у нативного события, включая методы stopPropagation()
и preventDefault()
. Эта обёртка помогает событиям работать одинаково во всех браузерах.
Еcли всё-таки нужно получить нативное браузерное событие, следует обратиться к атрибуту nativeEvent
. Синтетические события отличаются от нативных событий браузера и непосредственно не связаны с ними.
Как работает браузер?
Обо всех шагах, которые совершает браузер при переходе на страницу вы можете найти в этом посте.Задачи на написание кода
Подробный разбор одной из задач с реального собеседования вы можете найти на Boosty. Там вы можете найти как неоптимальный вариант решения, так и оптимальный. С описанием сложности каждого варианта решения в нотацииBig "O" notaion
.
Также по теме собеседований рекомендую прочитать: