[React] > Basic (Часть 1) Flashcards
[Классовый React]
Как работает и для чего нужен constructor?
constructor — вызывается до монтирования, применяет super(props) для пробрасывания пропсов
(используем для)
1) для привязка обработчиков событий к экземпляру
2) для инициализации this.state
[Классовый React]
Для чего сделан метод componentDidMount?
componentDidMount - вызывается сразу после монтирования.
(нужен для):
1) взаимодействия с DOM узлами
2) для создания запрос
3) для подключения подписок
($) монтирование — вставки компонента в DOM
($) подписки нужно не забыть и очистить в componentWillUnmount
[Классовый React]
Для чего сделан метод
componentDidUpdate(prevProps, prevState, snapshot)?
componentDidUpdate(prevProps, prevState, snapshot) - вызывается сразу после обновления, но не вызывается при первом рендере
(нужен для):
1) работы с DOM при обновлении компонента
2) для создания запрос на основе обновления пропсов
[Классовый React]
Для чего сделан метод componentWillUnmount
componentWillUnmount - вызывается непосредственно перед размонтированием и удалением компонента
(нужен для):
1) отмены подписок
2) сброс запросов
[Классовый React]
Для чего сделан метод shouldComponentUpdate(nextProps, nextState)
shouldComponentUpdate(nextProps, nextState) — вызывается перед рендером, когда получает новые пропсы или стейт. По дефолту true
(нужен для):
1) Повышения производительности но лучше юзать PureComponent
[Классовый React]
Для чего сделан метод static getDerivedStateFromProps(props, state)
static getDerivedStateFromProps(props, state) — вызывается непосредственно перед вызовом метода render, при монтировании и при обновлениях, возвращает объект для обновления состояния или null, чтобы ничего не обновлять
(нужен для):
1) для обновлений основанных только на пропсах
(пример) создание компонента Transition
[Классовый React]
Для чего сделан метод getSnapshotBeforeUpdate(prevProps, prevState)
getSnapshotBeforeUpdate(prevProps, prevState) - вызывается прямо перед этапом «фиксирования» в DOM, берет инфу и передает в componentDidUpdate() как snapshot
(нужен для)
К примеру для коректировки скрола
[Классовый React]
Для чего сделан метод static getDerivedStateFromError(error)
static getDerivedStateFromError(error) - Этот метод жизненного цикла вызывается после возникновения ошибки у компонента-потомка.
(нужен для)
рендера юая с ошибкой,
[Классовый React]
Для чего сделан метод componentDidCatch(error, info)
componentDidCatch(error, info) вызывается после возникновения ошибки у компонента-потомка. Он получает параметры: error, info — который говорит в каком компоненте произошла ошибка.
(нужен для)
логирования и выполнения запросов
Что такое Context в React и для чего он используется?
Контекст сделан для передачи глобальных данных
(пример)
1) Раздаем юзер тонкен
2) Для передачи глобального конфига, выбор языка
Что такое Виртуальная DOM (VDOM)?
Виртуальный DOM (VDOM) — это концепция, в которой создается виртуальная копия DOM`а которая синохронизируется с ним, и обновляет его с помощью библиотеки (к примеру ReactDOM)
(зачем?)
Отслеживание и обловления реального DOM занимает много ресурсов
Для чего нужен атрибут key при рендере списков?
Ключи нужны для сопоставление react елементов с массивом после его изминения.
($) ключ должен быть уникальными
Как работает проп children?
Пропс children нужен для пробрасывания react елементов которые хотим отобразить, часто применям в Dialog компонентах
В чем разница между управляемыми (controlled) и не управляемыми (uncontrolled) компонентами?
В HTML элементы формы, такие как input, textarea и select, обычно сами управляют своим состоянием и обновляют его когда пользователь вводит данные. В React мутабельное состояние обычно содержится в свойстве компонентов state и обновляется только через вызов setState().
В управляемом компоненте с каждой мутацией состояния связана функция-обработчик. Благодаря этому валидация или изменение введённого значения становится простой задачей. Например, если мы хотим, чтобы имя обязательно было набрано заглавными буквами, можно написать такой handleChange
Вместо того, чтобы писать обработчик события для каждого обновления состояния, вы можете использовать неуправляемый компонент и читать значения из DOM через реф.
Неуправляемые компоненты опираются на DOM в качестве источника данных и могут быть удобны при интеграции React с кодом, не связанным с React. Количество кода может уменьшиться, правда, за счёт потери в его чистоте. Поэтому в обычных ситуациях мы рекомендуем использовать управляемые компоненты.
[Классовый React]
Что такое PureComponent?
React.PureComponent реализует shouldComponentUpdate() поверхностным сравнением пропсов и состояния. Применяется когда метод render() родителя всегда рендерит одинаковый результат при одниковых пропсах и стейте.
(поверхностным сравнением)
не сравнивает глубоко обьекты, не эффективно по затратам
($)
Если родительский пюр не задаст contextTypes то дочерние елемент которые пологаются на контекст будут тоже игнорить обновления.
