В этой статье будут перечислены все распространенные вопросы о реакции на интервью. И приложены подробные ответы. Если вы хотите глубже понять основные принципы, вы можете найти их в рекомендуемой литературе в конце статьи.
Список вопросов
- Сравнение и полезность компонентов высшего порядка (HOC), реквизиты рендеринга и хуки.
- Что такое виртуальный DOM?
- Принцип реакции diff, как перейти с O(n^3) на O(n)
- Зачем использовать ключ и каковы преимущества?
- Принцип jsx
- Почему пользовательские компоненты React должны писаться с большой буквы
- Когда setState синхронен, а когда асинхронен?
- Как React реализует собственный механизм событий?
- В чем разница между событиями React и нативными событиями
- Поговорим об оптоволоконной архитектуре
- Зачем вам нужно привязывать это или использовать стрелочные функции в событиях React, в чем между ними разница
- Если вы понимаете вышеперечисленные вопросы, то можете закрыть эту страницу.
1. Сравнение и полезность компонентов высшего порядка (HOC), реквизитов рендеринга и хуков.
Подробнее см. в другой статье: Интервьюер: рассказ о HOC, Render props, Hooks.
2. Что такое виртуальный DOM?
В React React сначала преобразует код в объект JS, а затем преобразует объект JS в настоящий DOM, так называемый виртуальный DOM.
Это позволяет нам не обращать внимания на операции с DOM, а просто записывать данные и состояние.
3. Принцип реакции diff, как перейти с O(n^3) на O(n)
Почему O(n^3)? Интуитивно понятный способ преобразования из одного дерева в другое состоит в использовании динамического программирования для уменьшения временной сложности посредством этого запоминаемого поиска. Поскольку дерево является рекурсивной структурой данных, простейшим алгоритмом сравнения деревьев является рекурсивная обработка. Чтобы быть точным, временная сложность алгоритма редактирования минимального расстояния дерева составляет O (n ^ 2m (1 + logmn)), мы предполагаем, что m и n одного порядка, она станет O (n ^ 3).
принцип реакции diff
Проще говоря, реакция сравнивает только один и тот же слой, и если он отличается, удаляет его, Таким образом, каждый узел будет сравниваться только один раз, поэтому алгоритм становится O (n).
Для группы дочерних узлов в одном слое. Они могут меняться по порядку, но содержимое не меняется. React различает в соответствии со значением ключа. Как только значение ключа совпадет, он сразу вернется к предыдущему компоненту без повторного -создание.
Вот почему при рендеринге массива будут возникать странные ошибки, если не будет добавлено значение ключа или появятся повторяющиеся значения ключа.
В дополнение к ключу также предусмотрен выборочный рендеринг поддерева. Разработчики могут переопределить shouldComponentUpdate, чтобы улучшить производительность сравнения.
4. Принцип jsx
<div>Hello ConardLi</div>
Фактически, babel помогает нам преобразовать этот синтаксис в
React.createElement('div', null, `Hello ConardLi`)
Причина, по которой пользовательские компоненты должны быть написаны с заглавной буквы. Babel оценит первую букву компонента JSX в процессе компиляции.Если она в нижнем регистре, это собственный тег DOM, и он скомпилирован в строку.Если в верхнем регистре, он считается пользовательским компонентом.Скомпилирован в объект.
Почему следующий код выдает ошибку?
return (<a></a><a></a>)
Кроме того, поскольку мы создаем компоненты в соответствии с React.createElement(), может быть только один корневой узел. Если вы хотите использовать 2 параллельных узла, вы можете обернуть его с помощью >. > будет скомпилирован в
Вавилон переводится следующим образом:
Сыграйте в конверсию самостоятельно, чтобы усилить впечатление~
5. Когда setState синхронен, а когда асинхронен?
«Асинхронный» здесь не означает асинхронную реализацию кода, это значит, что react сначала соберет изменения, а потом выполнит унифицированные обновления.
setState является синхронным для нативных событий, а setTimeout — асинхронным для синтетических событий и перехватчиков.
В setState isBatchingUpdates будет использоваться, чтобы определить, следует ли обновляться напрямую или позже. Его значение по умолчанию — false. Но React вызовет функцию batchedUpdates перед вызовом обработчика события, и функция batchedUpdates установит для isBatchingUpdates значение true. процесс обработки, управляемый реакцией, становится асинхронным (пакетное обновление).
6. Механизм событий в React.
Давайте сначала посмотрим на классический график захвата пузырьков:
На этапе монтирования компонента по реагирующему событию жизни компонента добавить в документ событие addEventListener и добавить унифицированную функцию-обработчик событий dispatchEvent.
Свяжите все события с типами событий и реагирующими компонентами и сохраните эту взаимосвязь на карте.Когда событие инициируется, сначала сгенерируйте синтетическое событие, найдите соответствующую функцию события в соответствии с идентификатором компонента и типом события, смоделируйте процесс захвата и затем по очереди запускаются соответствующие функции.
Если собственное событие использует stopPropagation для предотвращения всплытия, синтетическое событие также предотвращается.
В чем разница между механизмом событий React и собственными событиями? События React названы с использованием верблюжьего регистра, чтобы отличить их от нативных, написанных строчными буквами. Вы не можете предотвратить поведение по умолчанию, возвращая false, вы должны явно вызвать preventDefault, чтобы предотвратить ответ браузера по умолчанию.
Анимационный анализ системы событий React и исходного кода
7. Что такое реактивное волокно
Справочная информация: поскольку браузеры сочетают в себе визуализацию графического интерфейса пользователя, обработку таймера, обработку событий, выполнение JS и удаленную загрузку ресурсов. Если выполняется обновление js, процесс, который занимает слишком много времени, приведет к тому, что анимация браузера не будет выполняться, или ответ ввода будет медленным.
В React Fiber используются две основные идеи решения:
- Приоритет рендеринга
- прерываемый
React Fiber делит процесс обновления виртуального DOM на две фазы: фазу согласования и фазу фиксации (см. рисунок ниже):
Процесс обновления будет разделен на множество осколков для завершения, поэтому задача может быть прервана другим процессом обновления с более высоким приоритетом до его завершения.В это время работа с низким приоритетом полностью отбрасывается, а затем ждать возможности Приходи еще.
процесс планирования
requestIdleCallback
Во-первых, react назначит свое собственное время истечения в соответствии с приоритетом задачи. requestIdleCallback вызывается в избыточном времени (желтая область) каждого кадра. Сначала вызовите channel.port1.onmessage, чтобы определить, меньше ли текущее время, чем время следующего кадра, Если оно меньше этого, значит, у нас есть свободное время для выполнения задачи. Если оно больше этого, мы выполним просроченную задачу. Если задача еще не истекла, задача будет сброшена на следующий кадр для исполнения.
Из-за задачи совместимости requestiDlecallback реализован, requestiDlecallback реализован.
Глубокое понимание: Situ Zhengmei React Fiber Architecture
8. Почему мы должны привязывать это или использовать стрелочные функции в событиях React?
На самом деле это не проблема реакции, а проблема этого. Но это также проблема, которая часто возникает в реакции. Так что давайте поговорим об этом
<button type="button" onClick={this.handleClick}>Click Me</button>
Вот это.Когда событие срабатывает и вызывается, потому что это связано во время выполнения.Значение его будет возвращаться к привязке по умолчанию, то есть значение не определено, потому что объявление класса и метод прототипа являются строго режимом работы.
Мы можем использовать bind для привязки к экземпляру компонента, не беспокоясь о его контексте.
Потому что это в стрелочной функции указывает на это во время определения, а не на это во время выполнения, поэтому стрелочные функции также могут быть решены.