React, Redux, Router Flashcards
Что такое React?
Это фронтенд библиотека. Она основана на JavaScript и поддерживается компанией Facebook. Главным предназначением этой библиотеки является предоставление разработчикам универсального UI для многократного использования.
Перечислите особенности React?
Ключевые особенности:
- Virtual DOM вместо реального DOM
- Быстрота и масштабируемость
- JSX
- React легко интегрируется с другими библиотеками
Что такое Virtual DOM? Как он работает с React?
Virtual DOM - легковесный JS объект, который представляет копию реального DOM дерева. Позволяет на много быстрее взаимодействовать со страницей, так как операции с реальным DOM с точки зрения производительности - сильно дороже.
Разница между управляемыми (controlled) и не управляемыми (uncontrolled) компонентами?
Управляемый компонент имеет состояние и через него как раз происходит “контроль” этого компонента. Например текст в строке ввода.
Не управляемый компонент - не имеет состоянием и поэтому нет возможности контролировать что в нём происходит.
Для чего нужен атрибут key при рендере списков?
Используя ключи React определяет какие элементы были изменены, добавлены, передвинуты. Более оптимально происходит рендер.
В качестве ключей лучше всего использовать уникальные значения, например ID. Индексы использовать не рекомендуется, так как они привязаны не к элементам, а к их положению в массиве. А оно может измениться.
Ключ должен быть уникальным среди своих соседей. В двух разных списках ключи могут повторяться.
Разница между состоянием и пропсами?
State не зависит от других компонентов и является внутренним состоянием компонента.
Props поступают в компонент снаружи.
Что такое JSX?
Какие у него ограничения?
JSX - это диалект языка JavaScript, с помощью которого удобно производить элементы React. Его особенность в том что можно писать HTML прямо в JS файле.
Важные моменты при использовании JSX:
- Возврат единственного корневого элемента.
- Все теги должны быть явно закрыты.
- Использование camelCase в именовании атрибутов.
Что такое фрагмент (Fragment)? Почему фрагмент лучше, чем div?
Фрагменты позволяют группировать список дочерних элементов без добавления лишних узлов в DOM. Это полезно, когда нужно вернуть несколько элементов из компонента, но нужно избежать оборачивания их в дополнительный контейнер, такой как <div>.
<></> или <Fragment></Fragment>
Разница между элементом и компонентом?
Элемент в React — это объект, описывающий, что должно быть отображено на экране (например, <h1>Hello, world!</h1>). Элементы являются строительными блоками интерфейса.
Компонент в React — это функция или класс, принимающий пропсы и возвращающий элементы. Компоненты могут быть переиспользуемыми частями интерфейса, которые могут содержать один или несколько элементов.
Что такое React-ссылка (ref)? Как создать ссылку?
Атрибут, который позволяет получить доступ к конкретному элементу DOM дерева.
Это нужно для вызова анимации, задание фокуса и выделения текста, взаимодействия с этим элементом сторонними библиотеками.
В классовом компоненте:
В конструкторе создаётся ссылка: this.ref = React.createRef()
Закрепление за элементом: <div ref={this.ref} />
Ссылка будет каждый рендер новая.
В функциональном компоненте:
Хуком создаётся ссылка: const ref = useRef()
Закрепление за элементом: <div ref={ref} />
В объекте ref всего одно свойство - current. И в нём хранится ссылка на элемент DOM.
Что такое контекст (Context)?
Как с ним работать?
Context - способ передачи данных по дереву компонентов без необходимости передавать пропсы на каждом уровне. Используется для аутенфикации, темы или языка.
Использование происходит в 3 этапа:
- Создание контекста
const ThemeContext = React.createContext(defaultValue); - Предоставление контекста (Provider)
Обернуть компоненты вProvider.
Вvalueпередать контекст.return ( <ThemeContext.Provider value={theme}> <Page /> </ThemeContext.Provider> ); - Потребление контекста (Consumer)
В классовом компоненте использовать свойство объекта контекстаConsumer. Внутри него сделать функцию, которая в качестве аргумента получает значение контекста:return ( <MyContext.Consumer> {value => <div>{value}</div>} </MyContext.Consumer> );
В функциональном компоненте воспользоваться хуком useContext()
const value = useContext(SomeContext).
Могут ли веб-браузеры читать JSX?
Нет, не могут.
Под капотом JSX превращается в обычный JS, а элементы становятся объектами.
В чём различие между React JS и React Native?
React JS - для веба.
React Native - для мобильных приложений.
Что такое компоненты?
Компонентыв React JS представляют из себяфункциив JavaScript. Они делят пользовательский интерфейс React на отдельные части и позволяют разработчику повторно использовать его в любой момент.
Что такое Props?
Propsот слова Properties (свойства). Это способ передать данные от родительских компонентов к ребёнку.
Важная особенность заключается в одном направлении данных, которые передаются через пропсы. Только сверху вниз. Изменять пропс в дочернем компоненте - нельзя.
Что такое State? Как его изменить?
Это внутреннее состояние компонента.
В классовом компоненте:
Начальное состояние задаётся в конструкторе через указание this.state.
Последующие значения состояние указываются через this.setState().
В функциональном компоненте:
Используется хук useState()const [state, setState] = useState(initialState)
Возвращает значение текущего состояния и функцию для его изменения.
Зачем в setState() нужно передавать функцию?
В качестве аргумента для setState может быть коллбек. Это нужно, когда новое состояние зависит от старого (state ⇒ {…}).
Связанно это с тем что setState выполняется асинхронно.
Как в React обрабатать пользовательские события?
Что такое синтетические события?
Обработка событий происходит обработчиками, которые можно прикрепить к JSX-элементам. В них передаётся функция.
Под капотом используются синтетические события, которые работают так же как и обычные, имеют тот же интерфейс, однако решают проблему кроссбраузерности.
Нативные события можно получить напрямую из синтетических событий, используя атрибут nativeEvent.
Как создать обработчик события в React? И в чём будут ключевые отличия от HTML?
Синтаксис:
- В HTML имя события обычно пишется с использованием строчных букв:
<button onclick="activateLasers()"></button> - В React имя события следует соглашению camelCase:
<button onClick={activateLasers}></button>
Предотвращения стандартного поведения:
- В HTML можно вернуть
false, чтобы предотвратить стандартное поведение:<a href="#" onclick='console.log("The link was clicked."); return false;'></a> - В React необходимо явно вызвать
preventDefault():jsx function handleClick(event) { event.preventDefault(); console.log("The link was clicked."); } <a href="#" onClick={handleClick}></a>
Вызов функции:
- В HTML необходимо вызывать функцию, добавляя
()к ее имени:<button onclick="activateLasers()"></button> - В React не нужно добавлять
()к имени функции:<button onClick={activateLasers}></button>
Какие стадии жизненного цикла компонента существуют в React?
Глобально жизненный цикл можно разделить на 3 основных стадии:
- Монтирование
- constructor
- render
- componentDidMount
- Обновление
- shouldComponentUpdate
- componentDidUpdate
- Размонтирование
- componentWillUnmount
Какие методы жизненного цикла компонента существуют в React?
render— единственный обязательный метод в классовом компоненте. При вызове он проверяет this.props и this.state и возвращает JSX для отображения компонента.
constructor- инициализация состояния. Вызывается до того как смонтируется компонент. В начале конструктора необходимо вызывать super(props). Если это не сделать, this.props не будет определён. Это может привести к багам.
componentDidMount- вызывается сразу после монтирования. Отлично подходит для сетевых запросов и создания подписок на события. Так же тут можно работать с DOM.
componentDidUpdate - вызывается сразу после обновления. Позволяет работать с DOM при обновлении компонента. Так же удобен для выполнения сетевых запросов, которые выполняются на основе сравнения текущих пропсов с предыдущими.
shouldComponentUpdate - используется для повышения производительности и избегания лишних перерисовок.
componentWillUnmount- вызывается непосредственно перед размонтированием компонента. В этом методе выполняется необходимый сброс: отмена таймеров, сетевых запросов и подписок.
componentDidCatch - вызывается после возникновения ошибки у компонента-потомка.
Что такое Компонент высшего порядка?
Это функция, которая в качестве аргумента принимает компонент, добавляет ему новый функционал и возвращает новый компонент.
Что такое React хуки (Hooks)?
Функции, которые добавили возможность в функциональных компонентах зацепляться за состояние и методы жизненного цикла. Хуки не работают внутри классов.
Что такое синтетические события в React?
Обёртка обычных событий, которая ведёт себя так же как обычные события, но при этом не имеет проблем с кроссбраузерностью.
Что такое условный рендеринг (Conditional Rendering)? Как его выполнить?
Возможность отрисовки компонентов на основании каких-то условий.
Обычно делается использованием тернарного оператора или логического И.
cond ? var 1 : var2
var1 && var2
Как в React типизировать пропсы?
PropTypes.
Создаётся два объекта. Для типов и для значения по умолчанию.propTypes - типы пропсов
Компонента.propTypes = {
prop1: PropTypes.string,
prop2: PropTypes.number.isRequered // isRequered - пометка что он обязателен
}
defaultProps - значения по умолчанию
Компонента.defaultProps = {
prop2: 2,
}
Что такое «бурение пропсов» (Prop Drilling)? Как его избежать?
Когда пропс передаётся через несколько уровней компонентов.
Избежать - использовать контекст или стейт-менеджеры, например redux.
Что нельзя делать в методе render?
- Нельзя изменять состояние компонента. Например делать вызов (
setState). - Компонента должна быть чистой функцией.
Разница между рендерингом и монтированием?
Рендеринг происходит при каждом изменении.
Монтирование - это первый рендеринг.
Что такое сhildren?
Возможность получить элемент, который находится в компоненте-контейнере в виде пропса.
function Container({ children }) {
return (
<div className="container">
{children}
</div>
);
}
function App() {
return (
<Container>
<p>Child</p>
</Container>
);
}
Что такое «ленивая» (Lazy) функция?
С чем обычно используется?
Функция, которая используется для отложенного импорта компонентов. Позволяет загружать компонент только тогда, когда он понадобился, а не при первой загрузке.
Для отображения процесса загрузки, пока ленивый компонент загружается - используется компонент <Suspense>. Пока идёт загрузка - будет отображать то, что указано в пропе fallback.
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
</div>
);
}
Поддерживает ли функция lazy именованные экспорты?
Нет - lazy функция может выполнять только импорт “по умолчанию”
При необходимости можно сделать транзитный компонент.
Как в React реализовать двустороннее связывание данных?
Двухстороннее связывание это когда изменения в пользовательском интерфейсе автоматически отражаются в состоянии компонента, и наоборот, изменения в состоянии компонента автоматически отражаются в пользовательском интерфейсе.
Пример двухстороннего связывания - управляемый компонент.
Разница между классовым и функциональным компонентами?
Разный синтаксис.
Классовые компоненты имеют методы жизненного цикла, в функциональных компонентах часть из них можно реализовать через useEffect.
В классовых компонентах надо использовать this.
Расскажите про хук useEffect.
Используется для побочных эффектов.
С помощью него можно реализовать методы жизненного цикла componentDidMount, componentDidUpdate и componentWillUnmount.
useEffect(() => {
// Код эффекта
return () => {
// Очистка эффекта (необязательно)
};
}, [dependencies]);
В массиве зависимостей можно указать значения, изменение которых будет вызывать срабатывание эффекта.
Если указать пустой массив зависимостей - эффект сработает 1 раз при монтировании.
Расскажите про хук useLayoutEffect.
У него точно такой же API как у useEffect. Разница в том, что useLayoutEffect срабатывает до появления элемента на экране.
Основные случаи использования useLayoutEffect:
- Чтение и изменение DOM перед отрисовкой.
Если нужно измерить размеры или позицию элементов и затем сразу же применить изменения, чтобы избежать мерцания. - Синхронные эффекты.
Если эффект должен быть выполнен синхронно, а не асинхронно, чтобы избежать промежуточных состояний. - Обновление рефов.
Если нужно обновить рефы и сразу же выполнить действия с элементом.
Расскажите про хук useCallback.
Позволяет создать функцию, которая не будет повторно создаваться при каждом рендере, а будет изменяться только при изменении массива зависимостей.
const memoizedCallback = useCallback(func, [dependencies]);
Примеры использования:
- Функция передаётся через пропсы в другие компоненты и нужно предотвратить повторные рендеры этих компонентов.
- Функция используется в зависимостях других хуков (например, useEffect), и нужно избежать её пересоздания для исключения изменения массива зависисостей.
Расскажите про хук useMemo.
Используется для мемоизации результата выполнения функции.
Результат будет получаться повторно только в случае изменения зависимостей.
const memoizedValue = useMemo(() => func(a, b), [a, b]);
Расскажите про React.memo().
Это HOC. Используется для мемоизации рендера функциональной компоненты.
При решении нужно ли совершать повторный рендер происходит поверхностное сравнение пропсов. Если изменений нет, то React.memo предотвратит повторный рендер.
В качестве второго аргумента можно передать функцию сравнения, если нужно более сложное сравнение:
const MyComponent = memo(function MyComponent(props) {
// Компонент
return <div>{props.content}</div>;
}, (prevProps, nextProps) => {
// Функция сравнения
return prevProps.content === nextProps.content;
});
Как аргументы для этой функции используются предыдущие и будущие пропсы.
Что делает метод shouldComponentUpdate?
Метод жизненного цикла, который используется для оптимизации.
Возвращая true или false, этот метод определяет, будет ли происходить повторный рендеринг компонента.
В качестве аргументов методу передаются будущие пропсы и будущее состояние.
Используя их возможно решить надо ли обновлять компонент.
shouldComponentUpdate(nextProps, nextState) {
if (nextProps.someProp !== this.props.someProp) {
return true;
}
if (nextState.count !== this.state.count) {
return true;
}
return false;
}
Сравниваем будущие пропсы с текущими.
Если пропс изменился, то обновляем компонент (возвращаем true).
Если интересующие нас пропсы и состояние не изменились, не рендерим компонент (возвращаем false).
Разница между useEffect() и componentDidMount()?
Если не брать в расчёт что это хук и метод классового компонента, то componentDidMount() сработает до отображения компонента на экране, а useEffect() после.
Для исключения этой проблемы используется useLayoutEffect().
Что такое PureComponent?
Чистые компоненты — это компоненты, которые рендерят один и тот же вывод для одного и того же состояния и props.
В случае классовых компонентов:
PureComponent в React — это тип компонента, который автоматически реализует метод shouldComponentUpdate с поверхностным сравнением пропсов и состояния.
Его стоит использовать, когда пропсы и состояние компонента меняются редко или меняются предсказуемо.
Такая компонента должна наследоваться от React.PureComponent - class myComponent extends React.PureComponent { … }
В случае функциональных компонентов:
Используется React.memo().
Правила (ограничения) использования хуков?
Выполнять хуки следует в самом верху иерархии функции. Это нужно для гарантирования момента выполнения.
Вызывать можно только в функциональных компонентах или пользовательских хуках.
В чем разница между useRef и createRef?
useRef - функциональныйcreateRef - классовый
createRef каждый раз создаёт новую ссылку
Что такое поднятие состояния вверх (Lifting State Up)?
Это паттерн при котором
- родительский компонент хранит “общее” состояние - свой и дочернего компонента.
- родительский компонент передаёт дочернему функцию изменения состояния в качестве пропса
