Шпаргалка по React
Пожалуйста, обратите внимание, прежде чем читать:
Эти ответы предназначены для кратких справок / обновлений света и не являются исчерпывающими пояснениями или учебными пособиями. Одной из основных целей этой страницы является перенаправление пользователей на замечательные источники, содержащие ответы и дополнительные материалы для ответов на указанные вопросы.
Этот лист также охватывает только базовый обзор, он не углубляется во внутреннюю работу или практическое применение React, которое вполне может потребоваться для более опытных должностей.
Основы Шпаргалка по 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
