React Flashcards
Что вызывает обновление компонента?
Обновление компонента вызывают изменение состояния (useState) и изменение пропсов. В классовых компонентах еще есть forceUpdate.
Изменение состояния не будет приводить к обновлениям, если новое значение состояния не изменилось
Virtual DOM
Виртуальный DOM в React – реакт работает не с DOM напрямую, а с его копией virtual dom. Этот подход помогает оптимизировать производительность веб-приложений.
Используется Reconcilation, batching
setState синхронный или асинхронный?
setState - асинхронный.
Что такое JSX
JSX — это расширение js, которое позволяет писать HTML в React компонентах.
Cинтаксический сахар для функции React.createElement(component, props, …children). Bable преобзазует Компоненты с заглавной буквы и html теги в React.createElement
В чем разница между классовыми и функциональными компонентами
Классовые компоненты имеют доступ к методам жизненного цикла компонента и управлению состоянием через this.state и this.setState(). Есть forceUpdate. В настоящее время сообщество реак отказалось от поддержки классовых компонентов в пользу фк
Функциональные компоненты не имеют доступа к методам жизненного цикла или состоянию. В ФК есть хуки в отличие от классовых компонентов
Методы жизненного цикла компонента?
Методы жизненного цикла – это способ подключения к различным этапам жизненного цикла компонента, позволяющий выполнять определенный код в определенное время. Вот список основных методов:
constructor – первый метод, вызываемый при создании компонента. Он используется для инициализации состояния. В функциональных компонентах для аналогичных целей используется хук useState.
render – отвечает за рендеринг JSX-разметки и возвращает содержимое, которое будет выведено на экран.
componentDidMount – вызывается сразу после рендеринга компонента в DOM. Обычно используется для задач инициализации, таких как вызов API или настройка слушателей событий.
componentDidUpdate – вызывается при изменении реквизитов или состояния компонента. Позволяет выполнять побочные эффекты, обновлять компонент на основе изменений или запускать дополнительные вызовы API.
componentWillUnmount – вызывается непосредственно перед удалением компонента из DOM. Используется для очистки ресурсов, которые были установлены в
componentDidMount, например, для удаления слушателей событий или отмены таймеров.
useState
useState возвращает значение состояния и функцию для его обновления.
useEffect
Хук useEffect позволяет выполнять побочные эффекты в функциональном компоненте. Мутации, подписки, таймеры, логирование и другие побочные эффекты не должны выполняться во время первой фазы рендеринга: это может привести к ошибкам и несоответствиям в пользовательском интерфейсе.
Вместо этого рекомендуется использовать useEffect. Функция, переданная в useEffect, будет выполняться после фазы фиксации, а если в качестве второго параметра передать массив зависимостей, то функция будет вызываться каждый раз, когда одна из зависимостей изменяется.
при не передаче массива выполняется каждый раз при обновлении компонента
Как отследить размонтирование функционального компонента?
Для этого функция, передаваемая в useEffect, может возвращать функцию очистки.
useEffect(()=>{
return ()=>{
}
},[])
Что такое пропсы в React?
props, пропсы – это данные, которые передаются компоненту от родителя. Реквизиты доступны только для чтения и не могут быть изменены.
Что такое пробрасывание пропсов (props drilling)?
Под пробрасыванием пропсов понимается процесс передачи пропсов через несколько уровней вложенных компонентов, даже если некоторые промежуточные компоненты не используют эти пропсы напрямую
Provider=>useContext
Для чего и как используется UseMemo?
Хук useMemo используется для кэширования и запоминания результатов вычислений. В него передается callback, которая производит вычисления, и массив зависимостей. Хук будет пересчитывать значение только тогда, когда изменится одна из зависимостей – эта оптимизация помогает избежать ресурсозатратных вычислений при каждом рендере.
Использовать при передаче значения в пропсы компонента, обернутого в React.memo. Либо в зависимости каким-либо хукам
Для чего используется useCallback и как он работает?
Хук useCallback возвращает мемоизированную версию коллбэк-функции. Эта версия будет изменяться только в том случае, если изменятся значения зависимостей в массиве зависимостей, переданном в useCallback.
Хук используют для передачи функций обратного вызова в оптимизированные дочерние компоненты, которые для предотвращения лишних отрисовок полагаются на ссылочное равенство (===).
Благодаря тому, что useCallback возвращает мемоизированную версию, ссылка на коллбэк будет стабильной между рендерами, если зависимости не изменились.
Таким образом, useCallback позволяет оптимизировать производительность за счет избежания лишних отрисовок.
В чем разница между useMemo и useCallback?
useMemo используется для запоминания результата вычислений, а useCallback – для запоминания самой функции.
useMemo кэширует вычисленное значение и возвращает его при последующих рендерах, если зависимости не изменились.
useCallback кэширует саму функцию и возвращает тот же экземпляр, если зависимости не изменились.
useRef
Обычно useRef используется для доступа к дочерним элементам в императивном стиле, то есть явно обращаясь к какому-то элементу DOM. Это позволяет выполнять различные действия над элементом – изменять стили, добавлять события и т.д.
