React
Что такое фрагмент (Fragment)?
Fragments позволяют группировать дочерние элементы без создания лишних DOM-узлов. Используется в компонентах вместо div элементов. Старый синтаксис: <React.Fragment></React.Fragment> Новый: <></> Фрагменты немного быстрее и используют меньше памяти чем div.
JSX
JSX — это специальный синтаксис, который расширяет JavaScript возможностью писать HTML внутри. В результате компиляции JSX и вызова React.createElement() возникают простые объекты — «React-элементы».
Что такое JEST?
JavaScript фреймворк, для юнит тестирования на основе Jasmine. Разработал Facebook. Очень удобен именно для React
Что такое React?
React - JavaScript фронтенд библиотека, разработанная Facebook в 2011. - В ядре - компонентный подход, позволяющий создавать переиспользуемые UI блоки. - Служит, для создания сложных интерактивных UI для web и мобильной разработки. React - нужен для эффективной отрисовки страницы приложения, для этого у него есть Виртуальный DOM.
Что такое React Router?
React Router - это мощная библиотека маршрутизации, построенная на основе React, которая помогает добавлять новые страницы и перемещаться между ними очень быстро, при сохранении синхронизации между адресом страницы и ее представлением.
Отличие Component от PureComponent? Что такое поверхностное сравнение? (Классы)
React.PureComponent похож на React.Component. Отличие заключается в том, что React.Component не реализует shouldComponentUpdate(), а React.PureComponent реализует его поверхностным сравнением пропсов и состояния. (shouldComponentUpdate(nextProps, nextState) - используйте, чтобы указать необходимость следующего рендера на основе изменений состояния и пропсов. По умолчанию происходит повторный рендер при любом изменении состояния. В большинстве случаев вы должны полагаться на это поведение. shouldComponentUpdate() вызывается перед рендером, когда получает новые пропсы или состояние. Значение по умолчанию равно true. Этот метод не вызывается при первом рендере или когда используется forceUpdate() - принудительный рендеринг. Этот метод нужен только для повышения производительности.) Метод shouldComponentUpdate() базового класса React.PureComponent делает только поверхностное сравнение объектов. Если они содержат сложные структуры данных, это может привести к неправильной работе для более глубоких различий (то есть, различий, не выраженных на поверхности структуры). Наследуйте класс PureComponent только тогда, когда вы ожидаете использовать простые пропсы и состояние, или используйте forceUpdate(), когда знаете, что вложенные структуры данных изменились. Также подумайте об использовании иммутабельных объектов, чтобы упростить процесс сравнения вложенных данных. Кроме того, метод shouldComponentUpdate() базового класса React.PureComponent пропускает обновление пропсов для всего поддерева компонентов. Убедитесь, что все дочерние компоненты также являются «чистыми».
В чем разница между state и props?
state - структура данных, необходимая для изменения и отслеживания пользовательских действий. props - набор конфигурации, поступающий от родительского элемента. Их нельзя изменять.
В чем смысл специального атрибута key?
Атрибут позволяет React понимать, какие именно элементы в списке были модифицированы или удалены, что увеличивает производительность рендеринга. Лучше всего использовать уникальные значения, такие как ID. Индексы из map использовать не рекомендуется
Что такое Virtual DOM? Как он работает с React?
Виртуальный DOM (VDOM) — это представление Real DOM, хранимое в оперативной памяти. Это представление синхронизируется с "настоящим" DOM. Сравнение происходит между вызовом функции рендеринга и отображением элемента на экране. Этот процесс называется согласованием. --- Пользователь что-то сделал -выполнилась функция - поменялся стейт -вернулся новый JSX - создался новый Виртуал дом (объект) - сравнился при помощи встроенных алгоритмов со старым Витруал домом (объект) - и наконец, происходит перерисовка ДОМа (объект), но не всего, а конкретного узла, где были изменения. Старый Виртуальный Дом удаляется сборщиком мусора т.к. на него больше нет ссылок.
Когда следует делать асинхронные запросы на сервер в React?
Для этого служит метод componentDidMount Или useEffect с пустым набором зависимостей
Назовите разницу между контролируемым и неконтролируемым компонентом?
Контролируемый компонент обладает своим стейтом, управляемый React. (Например, инпут с setState или с хуком). Неконтролируемые компоненты обладают внутренним стейтом (как пример значение тега textarea, когда мы что-то вписываем, но не взаимодействуем со стейтом)
Назовите стадии и методы жизненного цикла компоненты?
Монтирование: При создании экземпляра компонента и его вставке в DOM, следующие методы вызываются в по порядку: - constructor() - static getDerivedStateFromProps() - render() - componentDidMount() - этот метод запускается после того, как компонент отрендерился и смонтирования вставилась в DOM). В методе происходят действия, которые требуют наличия DOM-узлов. Это хорошее место для создания сетевых запросов. Обновление: Происходит при изменении пропсов или состояния. Следующие методы вызываются по порядку при повторном рендере компонента: - static getDerivedStateFromProps() - shouldComponentUpdate() - render() - getSnapshotBeforeUpdate() - componentDidUpdate(prevProps, prevState, snapshot) вызывается сразу после обновления. Не вызывается при первом рендере. Метод позволяет работать с DOM при обновлении компонента. Подходит для выполнения таких сетевых запросов, которые выполняются на основании результата сравнения текущих пропсов с предыдущими. Размонтирование: Этот метод вызывается при удалении компонента из DOM: componentWillUnmount() вызывается непосредственно перед размонтированием и удалением компонента. В этом методе выполняется необходимый сброс: отмена таймеров, сетевых запросов и подписок, созданных в componentDidMount(). Не используйте setState() в componentWillUnmount(), так как компонент никогда не рендерится повторно. После того, как экземпляр компонента будет размонтирован, он никогда не будет примонтирован снова. Обработка ошибок: Следующие методы вызываются, если произошла ошибка в процессе рендеринга, методе жизненного цикла или конструкторе любого дочернего компонента. - componentDidCatch(error, info) - этот метод жизненного цикла вызывается после возникновения ошибки у компонента-потомка. Он получает два параметра: error — перехваченная ошибка info — объект с ключом componentStack, содержащий информацию о компоненте, в котором произошла ошибка. componentDidCatch() вызывается во время этапа «фиксации», поэтому здесь можно использовать побочные эффекты. Метод можно использовать для логирования ошибок.
Что такое компонента?
Он может быть классом с методом render() (классовый компонент). Или же он может быть простой функцией (функциональный компонент). В любом случае, компонент принимает свойства (пропы, props от properties) на вход и возвращает JSX.
Что такое state компоненты? (классовые)
Относится к классовым компонентам. Это объект, содержащий некоторую информацию, которая может измениться в течение жизненного цикла компонента. Состояние похоже на проп, но оно является приватным (замкнуто в своей области видимости) и полностью контролируется компонентом, т.е. оно недоступно для других компонентов, кроме того, которому оно принадлежит и которое его определяет.
Hook useContext?
Позволяет читать контекст и подписываться на его изменения. Предназначен для прямой передачи пропов компонентам, находящимся на любом уровне вложенности.Принимает объект контекста (значение, возвращённое из const context = React.createContext('value')) и возвращает текущее значение контекста для этого контекста. Чтобы предоставить значение для этого контекста нужен <Сontext.Provider value={"value"}> над выше в дереве. Компонент, вызывающий useContext, всегда будет перерендериваться при изменении значения контекста <MyContext.Provider>. Если повторный рендер компонента затратен, вы можете оптимизировать его с помощью мемоизациию
Что такое React.memo()?
Функция-обертка React.memo() запрещает функциональным компонентам повторный рендеринг, если их пропы остались прежними.
Что такое Higher-Order компоненты?
Хок - это функция, которой обворачиваем компоненту (например React.memo). Смотрит на входящие пропсы - и принимает на их основании решение: перерисовывать или не перерисовывать.
Hook useCallBack (обворачиваем колбэк)?
Хук useCallback() возвращает одну и туже функцию, до тех пор, пока аргументы не изменились. Данный хук принимает коллбек и массив зависимостей. Коллбек повторно вычисляется только при изменении значений одной из зависимостей. Хук имеет следующую сигнатуру: useCallback( fn, [deps] ) // deps - dependencies, зависимости
Hook useLayoutEffect?
Хук useLayoutEffect() похож на хук useEffect(), за исключением того, что он запускает эффект перед отрисовкой компонента. Данный хук предназначен для запуска эффектов, влияющих на внешний вид DOM, незаметно для пользователя. Эта функция имеет такую же сигнатуру, что и useEffect(). В подавляющем большинстве случаев для запуска побочных эффектов используется useEffect().
Hook useMemo?
Хук useMemo() является альтернативой хука useCallback(), но принимает любые значения, а не только функции и возвращает не саму функцию, а результат её выполнения. По большому счету они являются взаимозаменямыми. Таким образом, useMemo используется для сохранения результатов тяжёлых вычислений, например обработка массива. Данный хук имеет следующую сигнатуру: const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); useMemo будет повторно вычислять мемоизированное значение только тогда, когда значение какой-либо из зависимостей изменилось. Эта оптимизация помогает избежать дорогостоящих вычислений при каждом рендере.
Hook useReducer?
Хук useReducer(), как и хук useState(), предназначен для управления состоянием. Он используется при наличии сложной логики управления состоянием или когда следующее состояние зависит от предыдущего. useReducer() принимает редуктор (reducer), обновляющий состояние на основе типа (type) и, опционально, полезной нагрузки (payload) переданной операции (action) и инициализационное значение. const [state, dispatch] = useReducer(reducer, initialState, initFn) // dispatch({ type: 'actionType', payload: 'actionPayload' }) используется для отправки операции в редуктор (для обновления состояния) // initFn - функция для "ленивой" установки начального состояния
Hook useRef?
Хук useRef() возвращает объект, свойство current которого содержит ссылку на узел DOM дерева или экземпляр компоненты в React, почти аналог метода getElementById. Следует избегать использование таких ссылок, т.к. это усложняет понимание работы приложения. Создание хука: const node = useRef(). Добавление ссылки: <tagName ref={node}></tagName>.
Hook useState?
Хук предназначен для управления состоянием компонента. Данная функция возвращает пару геттер/сеттер - значение начального состояния и функцию для обновления этого значения. Работает асинхронно. Функцию имеет следующую сигнатуру: const [value, setValue] = useState(defaultValue). setState может принимает или новое значение или функцию. Например: setState(prev => prev + 1).
Hook useEffect?
Хук, который следит за жизненным циклом функции: включилась, отработала, и очистилась, чтобы не занимать ресурсы. Сработает после отрисовки страницы, чтобы не тормозить приложение. Обычно берет значение из UseState единожды и использует его (замыкание). Первым параметром принимает колбэк, в котором мы будем делать сайдЭффекты, а вторым параметром принимает массив зависимостей. Если не поставить вторым параметром []-то он будет каждый раз вызываться. Пустой []-отработает единожды, когда компонента вмонтируется в DOM. Если укажем зависимость в массиве, скажем [state], то как только произойдут изменения в стейте, тут же сработает. Очистка эффектов производится посредством возвращения значений из хука. // обработчик const handler = () => { console.log('Случился клик!') } useEffect(() => { // запуск эффекта window.addEventListener('click', handler) // очистка эффекта return () => { window.removeEventListener('click', handler) } // массив зависимостей }, [handler])
В чем разница между элементом и компонентом?
Элемент - это что-то простейшее (к примеру, тэг <h1> В который завернута строка <h1/>), а компонент - это часть целого, т.е. функция или класс, который возвращает элементы.
Что такое Props?
Это объект, который мы используем для передачи каких-либо данных(свойств) компоненте. Они только для чтения и их нельзя менять. Всегда идут от родителя к ребенку.
Что такое чистая функция?
Это объект, т.к имеет свои встроенные свойства: name, constructor и тд. Чистая функция - не имеет бизнес-логики, не работает с ДОМ, не посылает запросы на сервер (сайд эффект), просто получает данные(пропсы) и отображает их. Side Effect-запрос на сервер, работа с DOM, изменение параметров функции. Принципы чистой функции: - Иммутабельность - функция не имеет права изменить данные, которые в нее пришли. - Идемпотентность - дает один и тот же результат при каждом вызове. Детерминированность - т.е. результат предсказуем.
Что такое контекст в React?
Это способность передачи данных через дерево компонентов, минуя прокидывание данных через пропсы от одного компонента к другому. 1. Для создания контекста достаточно воспользоваться методом React.createContext const context = React.createContext('value')) 2. После создания контекста, его требуется использовать совместно с компонентом Provider, <Сontext.Provider value={"value"}> 3. Второй компонент, который находится в объекте после вызова React.createContext является Consumer. Он предназначен для подписи на изменение контекста в функциональном компоненте. <Context.Consumer> { value = > <div>value</div> } </Context.Consumer> --- Для получения контекста в Class компоненте необходимо использовать свойство contextType, имеющееся в самом классе, и присвоить объект, возвращающий контекст. После чего, используя свойства this.context, можно получить доступ к его значениям уже внутри класса.
Что такое mapStateToProps и mapDispatchToProps?
Это функции по сути обычные враперы. Они пришли в функции connect из react-redux. C помощью mapStateToProps мы достает данные из стейта и передаем их в презентационную компоненту C помощью mapDispatchToProps мы передает, как правило, thunkTC или actionAC с помощью которых можем изменять стейт
Что такое React Hooks?
Это функции помощью которых, можно писать приложения, используя только функциональные компоненты, без классов. С помощью хуков можно следить за стейтом, эмулировать жизненные этапы компонента, работа с ссылками и многое другое.