State - это компонент который будет оборачивать всё наше приложение в контекст провайдер, для того чтобы провайдить в него определённые функции. А ВООБЩЕ идея в том чтобы дать возможность дочерним компонентам доступиться до родителя
Reducer - функция проверяет экшн тайп и возвращает нужный стейт
Context - установка места в приложении где данный стейт вообще будет актуален
Virtual Dom -
история - каждый раз когда нужно искать, менять что-то в дереве - это пиздец по производительности
мы создаём обычный джс объект который является копией дерева - и когда происходили изменения в реакте - в первую очередь мы меняли что-то в объекте, а потом сравниваем джс и хтмл дом и в итоге решаем данную проблему
Что такое props
Реакт построен на компонентном подходе - нам нужно взаимодействие между компонентами и
можно реализовать через props
Стейт
обычный объект с данными, он тут мутабл, его можно менять, и реакт за ним следит и отрисовует новый интерфейс Рефс
Мы создаём рефс с помощью функции из реакта и существует спец атрибут реф, и с помощью этого мы получаем ссылку на определённый дом элемент
Это нужно в 3 случаях: фокус на элемент, выделить текст, взаимодействовать с анимацией, или со сторонними библиотеками где нужно получить доступ к дом элементу.
Что такое jest
Это джс фреймворк который предназначен для юнит тестирования и основан он на framework jasmin
Когда следует использовать функциональные а когда классовые
Если объект нужен для того чтобы просто что-то отрисовать - лучше юзать функциональные (производительность),
а когда нужны доступы к жизненным этапам компонента - нужно использовать компоненты
классовые
Что происходит при setState
В первую очередь реакт получает объект который мы передаём в сетстейт и он соединяет его с новым, мы получаем новый стейт, и реакт берёт и создаёт новый виртуальный дом, и сравнивает его с реальным домом, и меняет только их в интерфейсе.
В чём разница между стейт и пропс
Стейт - это структура данных с начальными значениями, стейт может меняться, в основнном из-за пользовательских действий
Пропс - это параметры для дочернего компонента, его нельзя менять, однонаправленное состояние
Когда стоит делать асинхронные запросы на сервер
componentGetMount() - после готовности компонента
setEffect() - так же
В чём смысл атрибута key
В список нужно добавлять этот атрибут для того чтобы реакт мог менеджить состояния каждого элемента в массив, в общем тут по ПРОИЗВОДИТЕЛЬНОСТИ
Что значит компонент mounted
Вообще пришло от названия от одного из жизненых циклов, это значит, что компонент уже внедрён в реальное дом дерево и он готов к работе.
Разница между контролируемым и не контролируемым компонентом
Контролируемый - имеет стейт, или хук, например есть инпут - меняем значение и мы это значение контролируем
Не - не обрабатываем, например текстареа, но мы не взаимодействуем со значениями
Что такое фрагменты?
Не создаётся родительский тег в реальном дереве
Как реакт обрабатывает пользовательские события
Две вещи:
1) реакт добавялет только одно событие для корневого элемента, для того чтобы оптимизировать, например, в приложении много обработчиков кликов, реакт добавляет один клик на приложение и понимает сам по какому элементу произошёл клик.
2) когда получаем некоторый объект события, реакт предлагает свою обвёртку которая называется синтетический ивент, и это спец. обвёртка вокруг события ивента которая предоставляет общий АПИ для всех браузеров
Что такое редакс
Реакт - это инструмент для визуализации, при этом мы конечно можем передавать пропсы, стейт, юзать контекст. Но когда сложное приложение - нужен ещё абстрактный слой для работы с данными.
Это решение позволяющее работать отдельно работать с потоком данных.
● componentWillMount - перед рендерингом, в основном для настройки
компонента
● render - процесс рендеринга
● componentDidMount - уведомляет, про то, что компонент соединен с DOM
деревом
● componentWillReceiveProps - уведомляет, про то, что приходят новые
входящие свойства в компонент
● shouldComponentUpdate - возвращает true или false и служит для
оптимизации. Решает, нужно ли делать ре-рендеринг
● componentWillUpdate - уведомляет, что компонент будет обновлен
● componentDidUpdate - уведомляет, что компонент был обновлен
● componentWillUnmount - используется для удаления слушателей и очистки
компонента. Вызывается перед удалением компонента
Что передавать setState, нужно передавать функцию, потому-что там юзается точно предыдущий стейт.
Разница между презентационным и контейнер компонентами
Презентационный - говорит как всё должно выглядить ( интерфейс)
Контейнер - как всё должно работать и взаимодействовать (стейт, поведение, свойства раздаёт)
Что такое контекст
ПО умолчанию в реакте древовидная структура компонентов
Для передачи данных через вложенность
1)провайдер провайдит инфу, а консамер принимает её в нужном месте
Что такое Higher-Order компоненты?
Higher-order component (HOC) - функции, у которых входящий параметр компонент.
Возвращают новый компонент с добавленным поведением
Могут быть использованы в следующих случаях:
1. Переиспользование кода
2. Слой абстракции для state и взаимодействия с ним
3. Управление props Что делает shouldComponentUpdate и почему он важен
Это метод для оптимизации рендеринга, а нужно ли нам делать процесс рендеринга сейчас или этого нужно избежать, возвращаем тру или фолс.
Меняется стейт, но он не влияет на отображение. Но мы можем сказать, что например если
изменились поля то пожалуйста реакт не делай эти изменения. Функциональные - reactMemo
Что нельзя делать в методе рендер
Это функция в которой мы никак мы не меняем состояние, можно словить рекурсию
Какие типы middleware есть в редаксе
Реакт санк и реакт сага
Что такое pure components
По умолчанию мы наследуемсся от реакт компонента, но если мы будем наследоваться от пьюр
компонента, то он реализует ШУДКОМПОНЕНТАПДЕЙТ и оптимизирует компонент.
Что такое Error Boundaries
Простыми словами это компонент у которого можно реализовать ещё один пункт жизненного цикла, КОМПОНЕНТДИДКЕТЧ В общем проблемный компонент с ошибкой, чтобы не возвращать ошибки, а к примеру обработчик ошибок
Что такое реакт хуки
По сути от функциональных компонентов
Это функции для взаимодействия со стейтом, обновлениями, ререндерингом.
В чём разница между useRef and createRef
1)create - используется над компонентами и возвращает новую ссылку и не можно использовать в
функциональных.
2)use - создаёт объект иммютбл во время рендеринга
useState
Как валидировать props в реакт
через библиотеку prop-types
что такое и зачем eject
eject в конфигурацию уже какую-то при создании проекта, и например настроить вебпак
Что такое FLUX
Модель данных отделить от модели отображения, абстрактный слой который убирает данные от отображения, лучшая фича - нельзя было напрямую менять общее состояние приложения, а только через доп прослойки, несколько сторов.
Что такое React Fiber
Новый движок, который поменял рендеринг. Основная задача - инкрементальный рендеринг
виртуального дома, для работы с анимацией, и с другими процессами позволяющими менять визуальное отображение.
Реакт делает ререндер всех дочерних и родительского компонента при setState
shouldComponentUpdate - убираем лишний ререндер
Как можно улучшить производительность
shouldComponentUpdate
pureComponent
(functional components) reactMemo
Что такое Redux Thunk
По умолчанию изменение стейта происходит синхронным путём, при этом бывают ситуации когда нужно это сделать асинхронно
Например ждём ответа от сервера, для этого используем редакс санк
Реализовано это так что, в экшн криэйторах мы возвращаем не объект а функции с диспатчом, с помощью чего мы модифицируем стейт.
Ключевое отличие между React and Angular
Реакт - библиотека для создания интерфейсов.
Энгуляр - уже содержит все возможности, а реакт просто рисует.
Для создания полноценного приложения на реакте можно юзать разные библиотеки,
инструменты. Hooks нацелены на решение всех этих проблем, позволяя вам писать функциональные компоненты, которые имеют доступ к state, context, методам жизненного цикла, ref и т. д., без написания классов.
Отправка запросов, useEffect, axios.
useEffect - после готовности компонента
LazyLOADING
Подгрузка компонента, за счёт лейзи импорта
React.Suspense atribute fallback = это что показывается пока идёт загрузка
