Основы Шпаргалка по React
Эти вопросы показывают общее представление о том, что такое React и как он работает:.
- Что такое React?
— React — это библиотека JavaScript для создания пользовательских интерфейсов.
— По Facebook
2. Каковы основные характеристики React?
— Виртуальный ДОМ
— JSX
— Однонаправленный поток данных
— Рендеринг на стороне сервера
3. Что такое JSX?
— JSX — это расширение синтаксиса Javascript, которое позволяет нам писать HTML в нашем JavaScript для создания React Elements
— Babel компилирует JSX в вызовы React.createElement ()
— Более чистый код с выражениями JSX
— (B) Более безопасный код, поскольку использование JSX предотвращает атаки XSSSS
4. Что такое виртуальный DOM?
— Манипулирование фактическим DOM очень затратно
— Виртуальный DOM: React создает виртуальное представление фактического DOM в памяти
— Ожидаемые изменения сначала отражаются в обновленной версии Virtual DOM. Обновленный виртуальный DOM сравнивается с его предыдущей версией с использованием алгоритма React «diffing», чтобы определить, как лучше всего обновить реальный DOM.
Основы React
Что такое компонент в реакции и каковы два основных способа их определения?
— Компонент: независимый многоразовый интерфейс
— Компонент класса: компонент, реализованный с использованием классов ES6, расширяющих React.Component
— Компонент функции: Компонент, реализованный функцией JS, которая принимает аргумент props и возвращает элемент React.
2. Как компоненты Class сравниваются с компонентами Function?
— С помощью React Hooks компоненты класса заменяются функциональными компонентами для большинства случаев использования¹
— В прошлом логика с учетом состояния и жизненного цикла могла быть включена только в компоненты класса
Недостатки функциональных компонентов
— Для необычных жизненных циклов еще нет эквивалентов Hook: getSnapshotBeforeUpdate и componentDidCatch
— Старые сторонние библиотеки могут быть несовместимы с хуками
Недостатки компонентов класса
— Классы добавляют ненужную путаницу ради синтаксического сахара.
— Классы приводят к громоздкому иерархическому дереву, особенно во время повторного использования кода, что приводит к снижению производительности и сложности тестирования.
— Методы жизненного цикла класса разделяют связанные фрагменты кода
— Дополнительная информация: Чем функциональные компоненты отличаются от классов?
3. Что такое props и state в React?
— props — это объект JavaScript, переданный в Компонент, который содержит свойства конфигурации
— props неизменен принимающим компонентом
— state — это объект JavaScript, управляемый внутри компонента, который содержит его внутреннее состояние.
— Обновления для запуска повторного рендеринга
4. Что вызывает обновление компонента?
— Повторный рендеринг родителя, который может повлечь за собой новые props
— SetState ()
— (B) forceUpdate () (и этого следует избегать!)
5. Что делает setsettate () и как это работает?
— setState () планирует обновление объекта состояния компонента. -Когда состояние изменяется, компонент отвечает повторным рендерингом.
— Вызовы setState () являются асинхронными и могут быть пакетными.
— Обновления this.state не отражают новое значение сразу после вызова setState ()
— Из-за своей асинхронной природы вызов метода setState () путем передачи объекта, содержащего значение текущего состояния, может привести к неожиданному поведению
— Передача setState () функции, а не объекта, позволяет получить доступ к значению текущего состояния, избегая потенциально непредвиденного поведения, вызванного асинхронностью
6. Проведите меня через основные этапы жизненного цикла React
— 3 фазы: Mounting, Updating, Unmounting
— Mounting: конструктор → рендер → Updating DOM → componentDidMount
— Updating: рендер → обновление DOM → componentDidUpdate
— Unmounting: componentWillUnmount
— (B) включение getDerivedStateFromProps и shouldComponentUpdate
7. Как я могу предотвратить ненужный повторный рендеринг?
— React.PureComponent: Компоненты, созданные из этого класса, проводят поверхностное сравнение с предстоящими параметрами и состоянием и повторно визуализируют при наличии изменений.
— React.Memo: Компонент высшего порядка, который работает как -React.PureComponent, но используется для компонентов функций
shouldComponentUpdate: метод жизненного цикла, который принимает следующие реквизиты и состояние и возвращает логическое значение, указывающее, должен ли компонент повторно отображаться
8. Мое приложение React работает медленно, как мне улучшить его производительность?
— Выявление узких мест: профилирование компонентов в Chrome с помощью вкладки производительности Chrome или DevTools Profiler
— Виртуализируйте длинные списки — визуализируйте только узлы списков по мере необходимости
— Как избежать ненужных повторных рендеров (см. Предыдущий вопрос)
— Использование производственной сборки
9. Что такое рефери и для чего они используются?
— Ссылки предоставляют доступ к узлам DOM или элементам React, созданным в методе render ().
— В прошлом ссылки были ограничены только компонентами класса, но теперь они доступны в компонентах функций через хук useRef.
Использование включает в себя:
— Управление фокусом, выделением текста или воспроизведением мультимедиа.
— Запуск императивных анимаций.
— Интеграция со сторонними библиотеками DOM.
10. Что такое ключи и зачем они нужны при рендеринге списков?
— Ключи являются константными значениями строк, которые однозначно идентифицируют элемент списка среди своих братьев и сестер.
— Клавиши помогают React определить, какие элементы были изменены, добавлены или удалены.
— Ключи необходимы, потому что согласование различий элементов списка без них крайне неэффективно
11. Что такое контролируемые и неуправляемые компоненты в React?
— Оба являются способами реализации элементов управления формы в React
— Контролируемый: данные формы обрабатываются компонентом React
— Неконтролируемый: данные формы обрабатываются самим DOM
— Контролируемые компоненты являются рекомендуемым способом реализации форм.
— Неконтролируемые компоненты являются опцией при преобразовании устаревших баз кода в React или интеграции с не-React библиотекой¹
12. Что такое props.children?
- Содержимое между открывающим и закрывающим тегами компонента передается как дочерний атрибут props: props.children
— props.children может быть строковыми литералами, синтаксисом HTML, выражениями JS и функциями JS
13. Что такое границы ошибок?
— Границы ошибок — это компоненты React, которые перехватывают ошибки JavaScript в любом месте своего дочернего дерева компонентов, регистрируют эти ошибки и отображают резервный пользовательский интерфейс.
— Компоненты становятся границами ошибок, если они определяют: getDerivedStateFromError () или componentDidCatch ()
— Границы ошибок обычно определяются один раз и используются во всем приложении путем обтекания других компонентов, таких как блоки catch
14. Поговорите со мной об обработке событий в React. Где SyntheticEvent вписывается в картину?
— Обработка событий в элементах React аналогична обработке обычных элементов DOM, за исключением того, что в React есть несколько синтаксических различий¹
— Разница в синтаксисе 1: события React называются с использованием camelCase, а не в нижнем регистре.
— Синтаксическая разница 2: С помощью JSX вы передаете функцию в качестве обработчика события, а не строку.
— Элементы React получают синтетические события при обработке
— SyntheticEvent: кросс-браузерный объект-оболочка React вокруг собственного события браузера
— SyntheticEvent позволяет событиям одинаково функционировать в разных браузерах
15. Зачем вам связывать функцию в компоненте класса?
— Проблема связана с Javascript, а не с React
— В JavaScript это контекст функции, который принимает динамические значения в зависимости от того, как вызывается функция
— Когда функция используется как обработчик события как часть класса, она не связана и, как результат, не определена, что вызывает исключение при обращении к this.state или this.props
— Решение 1: это может быть явно связано с помощью метода bind ()
— Решение 2. Поскольку функции со стрелками принимают значение this в своей лексической области видимости, это может быть связано с использованием функций со стрелками
16. Каковы общие подходы к повторному использованию кода в React?
— Компонент высшего порядка
— Компонент высшего порядка: функция, которая берет компонент React и преобразует его в другой компонент, обогащая его функциональностью многократного использования
— Распространенный в сторонних библиотеках распространенный пример — подключение React Redux
— Легко составьте компонент, связав несколько HoC
— Недостаток: плохая читаемость при соединении многих каналов HoC, приводящая к адскому обертке
— Недостаток: ад-обертка может привести к вложенному дереву и затруднению отладки
Render props
— Реквизит рендеринга: шаблон, в котором компонент использует реквизит (функцию), который диктует свою логику рендеринга, а не реализует собственную.
— Распространенным примером является React-Router
— Недостаток: потенциально может быть многословным, поскольку логику рендеринга необходимо передать в JSX
— Недостаток: неправильная реализация может привести к проблемам с памятью
Пользовательские крючки
— Пользовательский хук — это функция Javascript, имя которой начинается с «use» и вызывает другие хуки
— Является частью обновления с подключением React 16.8 и позволяет повторно использовать логику с сохранением состояния без перестройки иерархии компонентов
В большинстве случаев пользовательских хуков достаточно для замены реквизита рендера и HoC и уменьшения необходимого количества вложений.
Позволяет вам избежать обертки ад / несколько уровней абстракции, которые могут прийти с Render Props и HoCs
Недостаток: крючки нельзя использовать внутри классов
Разное:
— Все 3 способа решения сквозных проблем:
— Общее продолжение заключается в реализации простого HoC, Render — Prop или пользовательского хука
— Дальнейшие чтения 1: компоненты высшего порядка против рендеринга реквизита
— Дальнейшее чтение 2: Сравнение: HOCs против Render Props против Hooks
17. Почему асинхронные вызовы должны выполняться в componentDidMount, а не в конструкторе?
— Распространенным заблуждением является то, что выборка данных в конструкторе позволяет избежать дополнительного шага рендеринга по сравнению с componentDidMount.
— Реальность: выборка данных в конструкторе не обеспечивает повышения производительности по сравнению с componentDidMount¹
— Данные не будут загружены, если асинхронный запрос в конструкторе завершится после монтирования компонента
— Лучшие практики — избегать побочных эффектов в конструкторе.
— В конструкторе состояние должно быть инициализировано, а setState () не должно вызываться
— (B) выборкой данных через асинхронные вызовы можно управлять с помощью ловушки useEffect³
— (B) React Suspense является потенциальной альтернативой извлечению данных в будущем
React Hooks
- Что такое React Hooks?
— Новая функция в React 16.8
— Позволяет компонентам функций использовать состояние и другие предыдущие функции только для класса
— Обратная совместимость и опционально
2. Почему я должен использовать крючки?
— Хуки позволяют просто повторно использовать логику с сохранением состояния без многоуровневых абстракций, таких как HoC и Render -Props (см. Вопрос о повторном использовании кода)
— Полностью согласен и обратно совместим
— Хуки облегчают понимание сложных компонентов, группируя связанный код в функции
— Хуки позволяют избегать компонентов класса, которые создают ненужные сложности
3. Что такое хук useState? Шпаргалка по React
— useState — это хук, который позволяет добавлять состояние React для компонентов функций
— useState, как и все хуки, является функцией
— Аргумент: исходное состояние
— Возвращает: пара, содержащая текущее состояние и функцию для его обновления.
4. Что такое хук useEffect? Шпаргалка по React
— useEffect позволяет выполнять побочные эффекты в компонентах функций
— useEffect срабатывает после рендеринга
— useEffect похоже на сочетание componentDidMount, componentDidUpdate и componentWillUnmount
— Аргументы: вызываемая функция и массив для React, чтобы проверить изменения для визуализации
5. Что такое крючок theuseReducer? Шпаргалка по React
— useReducer — это альтернатива useState, которая используется, когда существует сложная логика состояния, которая включает в себя несколько значений, или когда следующее состояние зависит от предыдущего
— 3 аргумента: функция редуктора, начальный объект состояния и функция для ленивой инициализации состояния
— Функция Reducer принимает текущее состояние и переменную действия и возвращает следующее состояние
— Возвраты: пара, содержащая текущее состояние, и функция отправки для отправки действия.
— Работает аналогично Redux
6. Что такое нестандартные крючки? Шпаргалка по React
(См. Вопрос о повторном использовании кода, в частности, раздел о пользовательских хуках)
7. Как производительность использования хуков сравнивается с производительностью классов?
- Хуки избегают больших накладных расходов, которые присутствуют в таких классах, как создание экземпляров и привязка событий.
— Хуки приводят к меньшим деревьям компонентов, потому что это позволяет избежать вложенности, присутствующей в HoC, и рендеринга реквизита, что приводит к меньшему количеству работы, которую должен выполнять React.
State Management. Шпаргалка по React
1. Что такое Redux? Шпаргалка по React
— Redux — это библиотека для управления состоянием приложения
— Redux — это решение для глобального управления состоянием, позволяющее передавать данные без необходимости проходить реквизит через каждый уровень (так называемое бурение реквизита).
— Вдохновленный потоковой архитектурой Facebook
2. Каковы основные составляющие Redux?
— Actions
— Action — это простые объекты Javascript со свойством type, указывающие, какой тип действия выполняется
Action отправляются в центральное хранилище с помощью store.dispatch ()
Action обычно создаются функциями Action Creator, которые при некотором вводе генерируют соответствующее действие.
Переходники
Reducers — это функции, которые принимают Action и текущее состояние и возвращают результирующее состояние.
Reducers должны быть чистыми функциями и не иметь побочных эффектов
хранить
Store — это центральный объект, который поддерживает и обновляет состояние приложения.
Store также занимается регистрацией и отменой регистрации слушателей.
3. Как работает Redux? Шпаргалка по React
— Redux вращается вокруг строгого однонаправленного потока данных
Первое: действие отправляется в магазин через store.dispatch (действие)
— Второе: Redux определяет результирующее состояние, вызывая функцию Reducer.
— Третье: корневой редуктор объединяет вывод нескольких редукторов в одно дерево состояний.
— Четвертое: Store сохраняет новое дерево состояний и уведомляет зарегистрированных слушателей.
4. Что такое Redux Selector? Шпаргалка по React
— Селектор — это функция, которая принимает состояние хранилища Redux и возвращает полученные данные из этого состояния.
— Селекторы позволяют минимально сохранять состояние хранилища Redux, вычисляя данные вне состояния.
— Селекторы обеспечивают лучшее разделение задач, сохраняя компоненты свободными от логики преобразования состояний
— Вычисления селектора могут быть запомнены, чтобы предотвратить дополнительные вычисления
— Селекторы также могут быть составлены и повторно использованы в приложении
5. Что такое Redux Toolkit? Шпаргалка по React
— Redux Toolkit: официальный самоуверенный набор инструментов -Redux, позволяющий быстро приступить к работе с Redux, не беспокоясь о шаблоне. Поставляется с готовыми функциями и утилитами, которые помогают легко настроить магазин и создавать действия и редукторы.
— Redux Toolkit поставляется с широко используемыми аддонами Redux:
— Redux Thunk — промежуточное ПО для асинхронной логики
— Повторный выбор — легко создавать запомненные селекторы
6. Что такое контекстный API? Шпаргалка по React
— Как и Redux, Context API — это решение для управления состоянием
— Контекст является официальной функцией в рамках React 16.3.
— Контекст состоит из 3 основных частей:
— Объект Context создается с использованием React.createContext (defaultValue)
— Провайдер — это компонент, который инициирует повторное рендеринг всех потребителей-потомков при изменении его значения.
— Потребитель — это компонент, который подписывается на изменения контекста.
7. Как мне решить глобальное управление состоянием с помощью Hooks?
— Передавая useContext контекстному объекту, компоненты функции могут подключаться к изменениям ближайшего соответствующего провайдера и будут перерисовываться при обновлении
— Компоненты функций могут альтернативно по-прежнему использовать потребителей для подписки на обновления контекста, хотя useContext, возможно, более читабелен.
6. Как Context API сравнивается с Redux и когда вы используете один поверх другого? Шпаргалка по React
— Настройка для Redux требует больше дополнительной работы, чем Context, так как Context встроен в React.
— Для более мелких вариантов использования более простых вариантов использования контекста должно быть достаточно
— Redux разрешает доступ к промежуточному программному обеспечению, которое запускает функцию после отправки действия
— Redux предоставляет доступ к надежному инструменту отладки Redux — DevTools, который позволяет вам путешествовать во времени и шаг за шагом видеть изменения, внесенные в ваш магазин.
Подборка полезных статей по react