react Flashcards
Для чего нужен Virtual DOM в React?
Виртуальный DOM - это концепция программирования, в которой «виртуальное» представление пользовательского интерфейса хранится в памяти и синхронизируется с «настоящим» DOM при помощи библиотеки, такой как ReactDOM. Эта техника позволяет улучшить производительность на клиентской стороне, избегая прямой работы с DOM путем работы с легким JavaScript-объектом, имитирующем DOM-дерево.
Какая разница между virtual DOM и shadow DOM?
Virtual DOM - полное представление реального DOM. Его самой важной особенностью является группировка изменений и выполнение одиночного повторного рендеринга вместо множества мелких. Виртуальный ДОМ - это библиотека, в которой каждый ДОМ узел - это JS обьект.
Shadow DOM - это нативная реализация в браузере которая позволяет создать свой, изолированный, DOM. Внутри Shadow DOM создается отдельный ““поддокумент””, к которому можно применять свои стили, экранированные от воздействий внешней среды.
В чем разница между state и props?
props - передается в компонент извне.
state - внутреннее состояние компонента.
В чем разница между классовым и функциональным компонентом?
У классовых компонентах есть state а у фунцкиональных его нет. Но состояние для функционального компонента можна добавить с помощью хука useState.
У классовых компонентах есть методы жизненного цикла а у функциональных его нет. Но некоторые методы жизненного цикла для функционального компонента можно реализовать с помощью хука useEffect.
Какие методы жизненного цикла есть в React?
В React есть 3 фазы: монтирование, обновление и размонтирование. В каждой из этих фаз есть свои методы жизненного цикла.
Монтирование
Эти методы вызывают в следующем порядке, когда экземпляр компонента создаётся и добавляется в DOM:
constructor()
static getDerivedStateFromProps()
render()
componentDidMount()
Обновление
Обновление может быть вызвано изменениями в свойствах или состоянии. Эти методы вызываются в следующем порядке, когда компонент повторно отрисовывается:
static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
Размонтирование
Этот метод вызывается, когда компонент удаляется из DOM:
componentWillUnmount()
Обработка ошибок
Этот метод вызывается при возникновении ошибки во время отрисовки, в методе жизненного цикла или в конструкторе любого дочернего компонента.
static getDerivedStateFromError()
componentDidCatch()
В React есть 3 фазы: монтирование, обновление и размонтирование. В каждой из этих фаз есть свои методы жизненного цикла.
Монтирование
Эти методы вызывают в следующем порядке, когда экземпляр компонента создаётся и добавляется в DOM:
constructor()
static getDerivedStateFromProps()
render()
componentDidMount()
Обновление
Обновление может быть вызвано изменениями в свойствах или состоянии. Эти методы вызываются в следующем порядке, когда компонент повторно отрисовывается:
static getDerivedStateFromProps()
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
Размонтирование
Этот метод вызывается, когда компонент удаляется из DOM:
componentWillUnmount()
Обработка ошибок
Этот метод вызывается при возникновении ошибки во время отрисовки, в методе жизненного цикла или в конструкторе любого дочернего компонента.
static getDerivedStateFromError()
componentDidCatch()
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
Как обновить state в классовом компоненте?
Для того чтобы обновить состояние в классовом компоненте можно использовать метод setState. Этот метод является асинхронным, и React может сгруппировать несколько вызовов setState() в одно обновление для улучшения производительности. Метод setState может принимать функцию, для того, чтобы обновить стейт на основе уже сеществующего стейта. Вызов метода setState всегда приводит к обновлению компонента.
Почему setState асинхронная функция?
Это нужно для того, чтобы React смог сгруппировать несколько вызовов setState() в одно обновление для улучшения производительности. Вызов setState приводит к обновлению компонента, поэтому setState сделали асинхронной чтобы “дождаться” пока все компоненты вызовут setState() в своих обработчиках событий прежде чем начать повторный рендер. Это избавляет от ненужных повторных рендеров.
Что нужно сделать, чтобы компонент обновился?
Для того чтобы обновился компонент нужно:
- чтобы изменился state, путем вызова метода setState
- чтобы изменились props
- вызвать метод forceUpdate
Как предотвратить лишние обновление компонента?
Есть несколько способов.
- реализовать метод жизненного цикла shouldComponentUpdate, которые отменяет рендер, если из него возвратить значение false
- наследоваться от PureComponent при создании классового компонента
В чем особенность PureComponent?
В большинстве случаев PureComponent можно использовать вместо написания собственного shouldComponentUpdate. Но он делает только поверхностное сравнение.
Для чего нужны key?
key - это специальный строковый атрибут, который нужно указывать при создании списка элементов. Ключи помогают React определять, какие элементы были изменены, добавлены или удалены. Их необходимо указывать, чтобы React мог сопоставлять элементы массива с течением времени.
Для чего нужен компонент Fragment?
Реакт компонент всегда должен возвращать только 1 элемента. Но иногда стоит задача возвратить несколько элементов. Фрагменты позволяют формировать список дочерних элементов, не создавая лишних узлов в DOM.
Для чего нужны порталы?
Порталы позволяют рендерить дочерние элементы в DOM-узел, который находится вне DOM-иерархии родительского компонента.
Что такое refs?
Рефы дают возможность получить доступ к DOM-узлам или React-элементам, созданным в рендер-методе. Так же рефы могут хранить в себе любую другую информацию кроме DOM-узла
Что такое context?
В React-приложении данные передаются сверху вниз с помощью пропсов. Однако, подобный способ использования может быть чересчур громоздким для некоторых типов пропсов, которые необходимо передавать во многие компоненты в приложении. Контекст предоставляет способ делиться такими данными между компонентами без необходимости явно передавать пропсы через каждый уровень дерева.
