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)?
Это паттерн при котором
- родительский компонент хранит “общее” состояние - свой и дочернего компонента.
- родительский компонент передаёт дочернему функцию изменения состояния в качестве пропса
Как реализовать однократное выполнение операции при начальном рендеринге?
useEffect с пустым массивом зависимости.
componentDidMount, если это классовый компонент.
Какие типы данных может возвращать render?
- React-элемент.
- Массивы
- Фрагменты (для обёртки нескольких элементов).
- Порталы.
- Строки и числа - автоматически обернутся в узел.
- Булевы значения или null - полезно при условном рендре.
Является ли React реактивным?
С одной стороны, если рассматривать реактивность как способность автоматически реагировать на изменение данных - он подходит.
С другой стороны существует мнение о том что из-за того что под капотом обновления интерфейсов могут собираться в пакеты - он не подходит.
Что такое портал (Portal)?
Порталы позволяют рендерить компоненты вне текущего контейнера React. Это может быть полезно для модальных окон, всплывающих подсказок и других окон, которым надо быть поверх всего.
У портала сохраняется возможность получить контекст и пропсы. В коде он используется “внутри” других компонентов, но во время рендера оказывается “снаружи”.
Создать портал: ReactDOM.createPortal(<>...</>, document.getElementById('modal-root'))
Первый аргумент: элемент, который будет использоваться в качестве портала.
Второй аргумент: DOM-контейнер, в который будет отрендерен.
Как изменить state используя динамический ключ?
Обернуть setState в функцию.
В неё передать динамический ключ.
Объект в setState обновить по динамическому ключу:{[key]: value}
```
handleChange = (e) => {
const { name, value } = e.target;
this.setState({
[name]: value,
});
};
```
Зачем делать eject?
Это команда предоставляет доступ к конфигурационным файлам и зависимостям CRA, которые по умолчанию скрыты.
Вернуться в обратное состояние обычной командой после этого нельзя.
Как создать компоненты в React?
Есть два способа:
- Классовый компонент
Надо в методеrender()вернуть разметку. - Функциональный компонент
Достаточно вернуть нужную разметку из функции.
Когда следует использовать классовые компоненты, а когда функциональные?
Всегда функциональные, за исключением двух случаев:
- Нужно использовать методы отлова ошибок, для которых пока не существует эквивалента в хуках
- Старая версия React, которая не поддерживает хуки.
Расскажите про метод constructor().
Это метод классового компонента.
В начале надо вызвать super(props) - тогда в компоненте будет возможность обращаться к this.props.
Так же в нём обычно задаётся стартовое состояние через this.state - это единственное место, где можно изменить state напрямую. В остальных случаях только this.setState().
В чем ключевое отличие между React и Angular?
React - библиотека для отрисовки приложения. Для другого функционала нужны другие решения (например для данных - Redux)
Angular - обширный фреймворк, где все решения есть в ядре (в коробке)
● Используя React - можно более гибко создавать приложения и более точечно управлять его частями
● Используя Angular - проще разрабатывать и поддерживать приложения
Техники оптимизации перфоманса React?
- PureComponent компоненты,
shouldComponentUpdate,React.memo React.Fragments- Throttling и Debouncing
- Использование
key - Мемоизация:
useMemo,useCallback
Разница между memo и useMemo?
memo - это HOC, для уменьшения количества ререндеров.
useMemo - это хук для мемоизации выполнения функции.
Что такое компонент-переключатель (Switching Component)?
Паттерн который подразумевает отображение одного из нескольких компонентов в зависимости от условий.
Обычно делается через объект, которому в качестве значений передаются компоненты.
Что такое «опрос» (Polling)? Как его реализовать в React?
Опрос - это периодическое обращение к серверу.
Реализуется через таймер в useEffect, в котором запускается функция на получение данных.
Какой второй аргумент можно передать опционально в setState?
Коллбек, который будет вызываться после выполнения функции setState и отрисовки компонента.
Почему React использует className вместо атрибута class?
Атрибут class является ключевым словом в JavaScript, а JSX это расширение JavaScript.
Как методы жизненного цикла классового компонента реализовать в функциональном компоненте?
-
componentDidMount,componentWillUnmountиcomponentDidUpdate
ЧерезuseEffect.
С пустым массивом зависимостей сработает 1 раз.
То что будет вreturnвыполнится при размонтировании.
Обновление реализуется через массив зависимостей. -
shouldComponentUpdate
Через HOCReact.memo. -
componentDidCatchиgetDerivedStateFromError
Никак. Делается классовый компонент и в него помещается функциональный.
Что такое предохранители (Error Boundaries)?
Когда предохранитель не поймает ошибку?
Это классовый компонент, который перехватывает ошибки, которые происходят в дочерних компонентах.
После этого отображает резервный UI и выводит сообщение об ошибки в консоль (или записывает в журнал).
Два ключевых метода componentDidCatch и static getDerivedStateFromError.
componentDidCatch - используется для логирования.
static getDerivedStateFromError - используется для обновления состояния компонента ({ hasError: true }) в случае ошибки.
В случае ошибки возвращается резервный UI - if (hasError) return <>Ошибка</>
Предохранитель не ловит ошибку
- В обработчике событий
- В асинхронном коде (используем try..catch)
- При ошибке в самом предохранителе
Что такое stateless компонент?
Компонент, поведение которого не зависит от состояния (и его у него нет).
Что такое stateful компоненты?
Компонент у которого есть состояние. И следовательно его поведение зависит от этого состояния.
Как использовать стили в React?
Атрибут style принимает объект где свойства написаны в camelCase и значения строки.
Что такое React PropType array with shape?
Если нужно описать вид объекта, то можно использовать shape.
Как построить название класса на условном выражении?
Через конкатенацию строк:
'btn-panel ' + (this.props.visible ? 'show' : 'hidden')
или через шаблонные строки:
btn-panel ${this.props.visible ? 'show' : 'hidden'}
Как добавить несколько объектов стилей одному элементу?
Будет достаточно использовать spread.
style={{ ...styles1, ...styles2 }}
Как установить фокус на элемент при загрузке страницы?
Нужно через ref получить ссылку на элемент, а через useEffect (или componentDidMount) применить focus() к этому элементу.
Какова польза модулей стилей?
Возможность свободно использовать “своё” пространство имён, которое не пересечётся с всеми остальными модулями проекта.
Что такое React Dev Tools?
Это инструмент, который позволяет разработчикам инспектировать и отлаживать иерархию компонентов React, включая их свойства (props) и состояние (state).
Как обычно организуют файлы в React?
По типам файлов (их предназначению) или по целым компонентам.
Как в PropTypes указать возможность использования нескольких типов?
Использовать метод oneOfType().
Component.propTypes = {
size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};
Можно ли импортировать файл SVG как компонент React?
Да, можно. Обычным импортом. Затем использовать как обычный компонент.
import { ReactComponent as MyLogo } from './my-logo.svg';
<MyLogo />
Нужно ли держать всё состояние в Redux? Следует ли когда-либо использовать внутреннее состояние React?
Не обязательно. Если указанное состояние не нужно никому, кроме компонента, то логичнее использовать внутреннее состояние.
Каково поведение непойманных ошибок в React?
Если ошибка не поймана - она размонтирует всё дерево компонентов.
Отсутствие UI лучше, чем неверно работающий UI.
Правда ли, что React делает ре-рендер всех компонентов и дочерних компонентов каждый раз когда вызывается setState?
В том случае, если не используются техники оптимизации, тоsetState вызовет повторный рендер компонента, а это вызовет повторный рендер всех дочерних компонентов.
Как предотвратить ненужные обновления с использованием setState?
Если в колбеке, который используется в изменении состояния вернуть null, то изменение состояния не будет произведено. Тем самым не будет выполнен повторный рендер.
Каков правильный способ размещения границ ошибок (error boundaries)?
Два основных варианта:
- Оборачивание маршрутов верхнего уровня.
- Оборачивание отдельных компонентов.
Когда атрибуты компонента по умолчанию устанавливаются в true?
Если не указать значение атрибута или пропса, то он по умолчанию установится в true.
Что такое компонент ожидания (suspense component)?
При использовании динамического импорта может быть так, что нужный компонент ещё не загрузился. Что бы отображать что-то во время загрузки используется компонент <Suspense>, которому в качестве атрибута fallback можно передать элемент, который будет отображаться, пока загружается внутренний компонент.
const OtherComponent = React.lazy(() => import("./OtherComponent"));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}
Что такое строгий режим (strict mode) в React? Почему строгий режим рендерит дважды в React?
Он активирует дополнительные проверки и предупреждения для всех потомков. Помогает выявлять потенциальные проблемы, такие как устаревшие жизненные циклы, использование устаревших методов и другие распространенные ошибки.
Рендеринг происходит дважды для обнаружения случайных побочных эффектов на этапе рендеринга.
В какой момент жизненного цикла вы применяется AJAX запросы и почему?
В классовых компонентах это componentDidMount и componentDidUpdate, так как компонент уже присутствует в DOM.
Для функциональной компоненты это useEffect.
Что такое React Reconciliation?
Механизм сверки посредством которого React обновляет DOM-дерево.
Когда состояние компонента изменяется, react должен рассчитать необходимость обновления DOM. Это делается с помощью создания виртуального DOM (с новым состоянием) и сравнения его с текущим DOM. Таким образом обновляются только те части, которые действительно обновились.
[Redux] Общее описание работы Redux.
Всё состояние хранится в store.
Значение из store получаются через mapStateToProps и useSelector.
Состояние изменяется только через actions, которые вызывают функции reducer.
Изменения производятся функциями reducer.
Функции reducer должны быть чистыми функциями.
Что бы action были доступны компоненте используется mapDispatchToProps. В функциональных импортируются напрямую и вызываются с помощью useDispatch.
Событие на странице создает объект action
action передается в dispatchdispatch передает action в middleware (опционально)
action попадает в функцию reducer
reducer возвращает новый объект состояния и передает его в state
state обновляется
перерисовывается UI
[Redux] Каковы основные компоненты Redux?
Store - объект, который хранит всю информацию о состоянии приложения и является единственным источником истины.
Actions - объекты, которые описывают изменения состояния.
Reducers - чистые функции, которые принимают предыдущее состояние и действие, и возвращают новое состояние.
Dispatch - метод, который отправляет действие в store для изменения состояния.
Middleware - функции, которые могут изменять или перехватывать действия перед тем, как они достигнут reducers.
Immutable data - данные, которые не могут быть изменены напрямую, а только созданы новые копии с изменениями.
Предсказуемость (Predictability) - Redux позволяет легко отслеживать изменения состояния и предсказывать, как они будут влиять на приложение.
[Redux] В чем разница между mapStateToProps() и mapDispatchToProps()?
mapStateToProps() - делает доступными значения из store в пропсах.
mapDispatchToProps() - делает доступными actions в пропсах.
[Redux] Как создать и использовать store?
Создаётся объект store и в него передаётся объект с reducer.
const store = createStore(counterReducer);
Затем надо обернуть приложение в провайдер с доступом к этому store.
<Provider store={store}>
<App />
</Provider>,
[Redux] Как установить начальное состояние в Redux?
При создании store используется функция createStore().
Первый аргумент это reducer, второй это начальное состояние.
Или второй вариант это в функции reducer указать начальное состояние, как значение по умолчанию.
function reducer(state = initialState, action) { … }
[Redux] Что такое действие (action) в Redux?
Это объект, который имеет тип (type) и может иметь payload.
[Redux] Что такое reducer?
Простая чистая функция, принимающая state и action и модифицирующая state.
Должна возвращать новый объект
[Redux] Можно ли вызвать действие в reducer?
Функция редьюсер должна быть чистой. Для этого можно использовать Thunk.
[Redux] Как сделать AJAX запрос в Redux?
Использовать middleware redux-thunk.
Это возможно из-за того что у thunk есть доступ к dispatch и getState - в нём можно вызывать отдельные действия в нужные моменты, а так же получать доступ к текущему состоянию.
[Redux] Как правильно получить доступ к хранилищу Redux?
В классовых компонентах используется connect, которая связывает компонент и предоставляет методы mapStateToProps() и mapDispatchToProps().
В функциональных компонентах через использование useSelector().
[Redux] Каково назначение констант в Redux?
Они исключают возможность опечатки при написании типа действия.
[Redux] Что такое Redux Thunk?
Это middleware, который позволяет создавать действия у которых есть возможность вызывать другие действия и есть доступ к состоянию. Это позволяет использовать асинхронные запросы в thunk.
[Redux] Что такое Redux DevTools?
Расширение, которое позволяет удобно работать с redux, производить отладку, видеть текущее значение состояния и путешествовать во времени.
[Redux] Что такое Redux селекторы и зачем они нужны?
Функция, которая выбирает какую-то заготовленную часть store.
[Redux] Как добавить несколько middleware в Redux?
Используя функцию applyMiddleware() можно применить несколько middleware.
[Redux] Можно ли Redux использовать только с React?
Нет - redux может работать с чем угодно и не завязан на react.
[Redux] Что такое Middleware?
Middleware — это функция, которая расширяет функциональность dispatch. Эта функция принимает dispatch и getState (из store), а возвращает функцию, которая принимает next (ссылку на следующую middleware или редьюсер) и возвращает еще одну функцию, которая принимает action.
[Redux] Какие типичные выборы middleware для обработки асинхронных вызовов в Redux?
Redux Thunk, Redux Promise, Redux Saga.
[Redux] Какие рекомендации следует соблюдать при написании reducer?
Редьюсеры должны быть чистыми функциями без изменения состояния.
Каждое действие должно описывать одно взаимодействие пользователя, даже если оно вызывает несколько изменений в данных.
[Redux] Что такое Redux Toolkit? Какие ключевые проблемы он решает?
Redux Toolkit- это пакет, облегчающий работу с Redux. Он создан с целью уменьшения сложности кода Redux, улучшения производительности и снижения объема написанного кода.
Решает три главных проблемы Redux:
- Слишком сложная настройка хранилища (
store). - Для того, чтобы заставить Redux делать что-то полезное, приходится использовать дополнительные пакеты.
- Слишком много шаблонного кода (boilerplate).
[Redux] Основные фишки RTK?
Простое создание store.
Возможность создавать slice для структурирования кода.
Простое создание действий и их импорт.
Встроенный thunk.
[Router] Что такое React Router?
Библиотека для удобного роутинга приложения.
Роутинг - изменение адресной строки в одностраничном приложении.
[Router] Как базово пользоваться Router?
Нужно обернуть приложение в <BrowserRouter> (v4) или <Switch> (v6).
Внутри него добавить несколько <Route> с свойствами path и component.
Для перехода на какой-то путь используется <Link> с свойством to вместо <a>.
[Router] Как пользоваться <Route>?
Основное свойство это path. В нём указывается путь для этого маршрута. Если нужно абсолютно точное совпадение (например для пути “/”), то надо воспользоваться атрибутом exact.
Если больше одного пути без exact подходят, то будут отображены все.
В качестве компонента для <Route> может быть передан атрибут component v4 (element v6) с указанием компонента или render с передачей функции, которая будет исполнена для рендера.
[Router] Как сделать динамический путь?
Для создания динамического пути в атрибуте path компонента <Route> добавляется, например “/:id”. В таком случае при переходе по ссылке, которая будет содержать такой паттерн - то что будет на месте :id будет возможно получить как значение.
Например:
<Route
path="/starships/:id"
render={({match, location, history}) => {
return <StarshipDetails itemId="match.params.id" />
}}
/>
В объекте match в свойстве params будет id.
Если в конце добавить “?”, то эта часть будет считаться опциональной. Тогда путь будет соответствовать как варианту с id, так и без него. Например: /:id?
[Router] Как взаимодействовать с адресной строкой программно?
v4
Нужно использовать HOC witchRouter. Он предоставляет доступ к match, history и location для компоненты.
И можно, например выполнять history.push('/adress') для программного перехода. Так же можно использовать replace() для полной замены пути.
v6
Воспользоваться хуком useNavigate.
[Router] Как показать что-то в случае несуществующего маршрута?
v4 - нужно использовать компонент без path.
v6 - нужно в path указать *.
[Router] Как получить или установить параметры запроса из адресной строки?
v4
Для получения используется дополнительные библиотеки, например query-string.
Установка происходит просто через history.push(), в который передаётся не строка, а объект.
v6
Получение проихсодит через хук useLocation и объект URLSearchParams.
Установка через useNavigate().
[Router] Как выполнить автоматический редирект после входа в систему?
React Router v4:
Используем компонент Redirect для перенаправления после успешного входа.
Redirect внутри компонента Login проверяет состояние входа и, если пользователь вошёл, перенаправляет его.
React Router v6:
Используем компонент Navigate вместо Redirect.
Логика остаётся той же: после успешного входа Navigate перенаправляет пользователя.
