Окончание ответов на вопросы интервью [Вводный выпуск]

Это ответ, который я разобрал сам.Пожалуйста, дайте мне несколько советов, пожалуйста, укажите на неправильные, и пришлите мне копию других популярных тестовых сайтов (не ограниченных и реагирующих)~ Спасибо

Интервью Вопрос Ответы

React
1. Представляем Redux, какую проблему он в основном решает? Как выглядит поток данных? Как управлять несколькими компонентами, используя одно и то же состояние?
  1. Redux — это контейнер состояний, решающий проблему разделения состояний между компонентами, реализующий многокомпонентное взаимодействие, а также являющийся механизмом MVC.
  2. Модули Redux4
    1. view — отправляет действие при изменении состояния компонента
    2. Действие: Создайте объект действия, описывающий изменение состояния, и передайте его в хранилище.
    3. store: получить объект действия и передать его редьюсеру, заставить редьюсер выполнить задачу обновления состояния, обновить узел dom после обновления (то есть выполнить рендеринг в представлении)
    4. редуктор: обработать объект действия, обновить состояние компонента и вернуть новое значение состояния в хранилище
  3. Поток данных Redux:
    1. Создайте хранилище для хранения данных, определите действия для изменения хранилища и сопоставьте различные редукторы внутри.
    2. Уровень представления отправляет действие, хранилище получает действие для изменения состояния, выполняет метод обновления и вызывает обратный вызов, переданный подпиской.
    3. Уровень представления подписывается на обновления состояния в componentDidMount, и после получения обновленного хранилища setState и forceUpdate обновляют представление.
  4. Несколько компонентов используют одно и то же состояние. Всем можно управлять в одном редукторе.
2. Процесс подключения React-Redux к реактивным компонентам
  1. ProviderОбеспечить хранилище для потомков: обернуть слой в самый внешний слой приложения при его использовании, суть в том, что контекст переносит хранилище по слоям
  2. connectПредоставьте данные и методы изменения для компонентов: по сути, это высокоуровневый компонент, соединяющий компоненты React с хранилищем Redux, возвращающий новый класс компонентов, который был связан с Redux Store, и понимающий, что несколько компонентов используют одно и то же состояние. Добавьте методы для использования состояния и отправки компонентам через mapStateToProps и mapDispatchToProps. При подключении рендеринг компонента запускается setState.
    1. mapStateToProps(Function): этот обратный вызов вызывается при изменении хранилища Redux.Этот метод должен возвращать объект, интегрированный с реквизитами компонента.Компонент не прослушивает хранилище Redux, если не передается mapStateToProps. Используйте второй параметр ownProps с осторожностью, изменение свойства родительского компонента также приведет к выполнению mapStateToProps.
    2. mapDispatchToProps: возвращает объект (сопоставление создателя действия) или функцию для получения отправки, возможно, используя bindActionCreator.
3. Как промежуточное ПО получает хранилище и действие и как с этим бороться
  1. При созданииStore ПО промежуточного слоя и хранилище связываются через функцию applyMiddleware, и хранилище передается в ПО промежуточного слоя при инициализации хранилища.
  2. Параметры метода, которые может передать промежуточное ПО, преобразуются в массивы.Первое промежуточное ПО получает действие при отправке (действие) в первый раз, а последующее промежуточное ПО получает действие, которое вызывает отправку после обработки предыдущим промежуточным ПО. обработать
4. Что такое промежуточное ПО Redux, принимает несколько параметров
  1. Промежуточное программное обеспечение Redux — это функция, которая улучшает метод диспетчеризации, так что диспетчеризация больше не принимает чисто объектные действия, а принимает функцию, которая передает исходную диспетчеризацию в качестве параметра.
  2. Параметры приема представляют собой серию функций промежуточного программного обеспечения, использующих сокращение для реализации компоновки и выполнения этих операций между выпуском действия и выполнением редюсера.
  3. Рукописный состав:
    
    function compose (...funcs) {
    
    funcs.reduce((a, b) => {
    
    return (...args) => a(b(...args)) // ...args — это первый параметр, переданный в
    
    })
    
    }
  4. compose возвращает расширенную отправку
5. Как ПО промежуточного слоя для избыточных запросов обрабатывает параллелизм
  1. промежуточное ПО redux-trunk — действие, переданное в диспетчер, может быть определено как метод fun, а fun может получить контроль над диспетчером, чтобы он мог контролировать, когда редьюсер начинает менять состояние.
    1. Параллелизм через Promise.all
    2. Используйте async и await с Array.map() // Цикл forEach выполняется последовательно или нет? Сомнительный
    3. Вы можете использовать очереди для управления количеством параллелизма
  2. промежуточное ПО redux-saga — генератор + обещание
6. Как обрабатывать асинхронные запросы в Redux
  1. Требуются два действия отправки: когда пользователь инициирует первую отправку, выполняется асинхронная операция, а настоящая отправка запускается при возврате асинхронной операции.
  2. Используйте redux-trunk, получите диспетчерское управление, вы можете решить, когда запускать редьюсер для изменения состояния
7. В чем разница между диспетчером состояний Redux и монтированием переменной в окно
  1. Данные контролируемые
  2. ответ данных
8. Как настроить React-маршрутизатор
  1. Приложение браузера представляет пакет react-router-dom, который автоматически импортирует react-router, а проект RN представляет react-router-native.
  2. основные компоненты
    1. маршрутизатор маршрутизатор
    2. Связать соединение
    3. Маршрут
    4. Эксклюзивное переключение
    5. Перенаправление перенаправление
  3. 3 способа рендеринга маршрута, в порядке приоритета
    1. match имеет значение null, когда дети не совпадают
    2. component
    3. render
  4. Примечание. При использовании рендеринга встроенных функций вам необходимо использовать рендеринг/дочерние элементы, а не компонент
  5. динамическая маршрутизация
  6. Вложенные маршруты
  7. Защита маршрута: создайте высокоуровневый компонент для переноса маршрута, чтобы он имел функцию оценки разрешений, обычно в сочетании с сохранением.
9. Как react-router реализует переключение маршрутов? BrowserRouter как маршрутизатор
  1. Компонент Router использует Provider для предоставления объекта истории вниз, а также мониторинга изменения местоположения
  2. Маршрут получает действие (реквизиты || контекст), Маршрутизатор пытается сопоставить путь к своему свойству с местоположением, обнаруживает совпадения (дочерние элементы > компонент > рендеринг) и отображает содержимое.
  3. Ссылка переходит по ссылке, генерирует тег a, отключает событие по умолчанию, js обрабатывает переход по событию клика (history.push) -> Ссылка и использует тег a напрямую. Разница в том, что страница a будет перезагружена, а ссылка будет только повторно визуализировать часть компонента Route
  4. Redirect to
  5. Получить историю из контекста this.context.router.history.push...
10. Маршрутизация динамически загруженных модулей
  1. компонент: import(...), при упаковке он делится на несколько фрагментов в соответствии с импортированной страницей маршрутизации и загружается по запросу.
  2. Ленивая загрузка с использованием реактивно-загружаемого пакета
11. Как контролировать маршрут управления во внешнем интерфейсе
  1. Реализуйте компонент высшего порядка PrivateRoute в качестве защиты маршрута.
12. Как решить проблемы при использовании маршрутизации
  
  Проблемы, вызванные обновлением версии
13. Как разделить соответствующие состояния между несколькими компонентами, каждый маленький компонент имеет свое собственное состояние, и между ними есть некоторые общие состояния, которые необходимо поддерживать, как об этом думать
  1. Состояние каждого виджета помещается в приватное состояние, а публичным управляет Redux.
14. Жизненный цикл React и его собственное понимание, а также модификация жизненного цикла V16
  1. Этап 3
    1. при установке
      1. constructor
      2. getDerivedStateFromProps
      3. render -> React обновляет DOM и ссылки
      4. componentDidMount (стадия фиксации)
    2. При обновлении -> условия для запуска обновления: изменение родительского реквизита, setState, forceUpdate()
      1. getDerivedStateFromProps
      2. shouldComponentUpdate -> оптимизирует отрисовку компонентов
      3. render
      4. getSnapshotBeforeUpdate (выполняется перед фиксацией) -> React обновляет DOM и ссылки
      5. componentDidUpdate
    3. при удалении
      1. componentWillUnmount
  2. Изменения в жизненном цикле? причина?
    1. v17 намерен удалить три воля.После появления волокна слайс задачи может быть прерван.Эти три волевых метода могут выполняться несколько раз, что не соответствует первоначальному замыслу определения жизненного цикла.
      1. componentWillMount
      2. componentWillReceiveProps
      3. componentWillUpdate
    2. Вводятся 2 новых:
      1. static getDerivedStateFromProps -> не может получить это, не вызывает побочных эффектов в этих завещаниях
      2. getSnapshotBeforeUpdate: Сценариев использования не много, только замена старого апи
15. Представляем React-оптимизацию
  1. Ядро: рендерить только то, что нужно рендерить, вычислять только то, что нужно вычислить
  2. выравнивание состояния
  3. Нужно ли перерисовывать?
    1. Компоненты класса: shouldComponentUpdate, PureComponent (поверхностное сравнение состояния)
    2. функциональный компонент: используйте функцию высшего порядка React.memo, второй параметр похож на shouldComponentUpdate
    3. ReactHooks: useMemo (кэшировать возвращаемые результаты энергозатратных операций) (не говоря уже о userMemo)
    4. Разница между useMemo и useEffect: useEffect выполняется после обновления dom, useMemo выполняется во время рендеринга
16. Принцип делегирования событий компонента React
  1. Делегирование событий: события регистрируются в документе
    1. Единое управление и удаление
    2. Избегайте многократной регистрации одного и того же типа события, например
  2. Исходный код реакции определяет, является ли это синтетическим событием, с помощью таблицы сопоставления синтетических событий.
  3. e.stopPropagationПредотвратить попадание пузырьков на уровень документа, решение: e.nativeEvent.stopImmediatePropagation()
17. Сравнение diff, patch, update и vue
  1. Когда состояние компонента в React изменится, React перерендерит этот компонент и его потомков, но это не значит, что при рендеринге будет отброшен последний результат рендеринга, React сравнит новые и старые vnodes, а затем исправит их до дом.
  2. Если дерево компонентов слишком велико, алгоритм diff несколько потеряет производительность, и разработчику необходимо установить хук shouldComponentUpdate.
  3. По сравнению с Vue: Vue реализует сбор зависимостей во время получения, не сравнивает все дерево и обновляет компоненты с измененными состояниями более детально, в то же время в defineProperty нет поверхностных сравнений, как у объектов PureComponent.
  4. Состояние в реакции должно быть спроектировано плоским, чтобы облегчить оптимизацию shouldComponentUpdate.
18. Режим React Render Props — перехват рендеринга
  1. форма:
    1. props: метод fun, который возвращает компонент B, передается компоненту A. Формальные параметры fun будут переданы, когда компонент A вызовет fun для рендеринга B, а формальные параметры поступают из компонента A.
    2. Чидден: Смысл тот же, props становится дочерним элементом B, верно?
  2. Цель: При рендеринге компонента B параметры берутся из A
  3. Использование: повторное использование логики, извлечение чистой логики для инкапсуляции компонента (эквивалентного вышеприведенному компоненту A), такого как метод общей обработки формы onChange и т. д.
  4. Повторное использование аналогичной логики в директиве vue:
19. import {Button} from 'antd', при упаковке упаковывается только кнопка, и она загружается в модули, как это делается?
  1. пройти черезbabel-plugin-importОбработка конфигурации.
```
{
  "plugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css"
    }]
  ]
}
```
  2. эквивалентно
```
import Button from 'antd/es/button';
import 'antd/es/button/style/css';
```
20. При монтировании React есть 3 компонента: textComponent, composeComponent, domComponent, различия и отношения.
  
  Не уверен, что это за тестовый сайт, это тип первого параметра React.createElement? Знайте только разницу между классом и функцией.Первый вызывает метод рендеринга экземпляра, а второй выполняется напрямую
21. Какие изменения произошли внутри компании после изменения структуры Dom в React? непонимание сути проблемы
  1. setState вызывает изменения состояния
  2. React перестраивает дерево vnode
  3. По сравнению со старым деревом vnode получаются патчи измененной части (алгоритм diff).
  4. Обновление патчей до настоящего дома
22. Является ли setState синхронным или асинхронным?
  1. Вывод: синхронность в нативных событиях и setTimeout, асинхронность в синтетических событиях и жизненном цикле.
  2. Причина: Пакетное обновление React
    1. В исходном коде по isBatchingUpdates (по умолчанию false, синхронное обновление) определить, обновлять сразу или поставить в очередь, чтобы отложить обновление
    2. Метод batchedUpdates изменит isBatchingUpdates на true, вызывая асинхронное обновление setState.
    3. React вызовет метод batchedUpdates перед вызовом обработчика событий, поэтому событие setState, обрабатываемое React, является асинхронным.
23. Как React проверяет и изменяет данные
  1. Массовое обновление — см. Синхронизация setState, проблемы с асинхронностью
  2. Пакетное обновление dom перед выполнением следующей задачи макроса -> Promise.then
24. Какие методы вызовут реакцию на повторный рендеринг
  1. setState
  2. рендеринг родительского компонента
  3. forceUpdate
25. Разница между React15/16.x
  1. Процесс согласования использует срезы задач
  2. модификация жизненного цикла
26. Реагируйте на распространенные методы связи
  1. props
  2. Контекст — расширенный API Не связывайтесь с этим
    1. React-Redux: прохождение магазина
    2. React-router: история проходов, локация
    3. Подкомпоненты могут получить контекст тремя способами:
      1. class static contextType
      3. хуки: useState
  3. несколько контекстов
    1. класс может принимать только один контекст
    2. Потребители могут быть вложены слой за слоем и будут убиты
    3. useState может получать несколько состояний
  4. Уведомление:
    1. Если значением Провайдера является объект, его следует повесить в состоянии родительского элемента, т.к. изменение реквизита объекта Провайдера вызовет отрисовку дочернего компонента
  5. использовать избыточность
27. Знакомство с компонентами высшего порядка React
  1. Получить компонент и вернуть компонент
  2. Режим React Render Props (выше)
28. алгоритм сравнения
  1. стратегия алгоритма сравнения
    1. Минимальная временная сложность операции преобразования одного дерева в другое дерево без использования алгоритма оптимизации составляет O(n3)
    2. Сравнение с коллегами: в сети есть несколько мобильных узлов на разных уровнях.
    3. Два компонента разных типов (тип, ключ) генерируют разные древовидные структуры.
    4. Укажите, какие элементы одинаковы по ключу
  2. diff process — есть 3 операции при сравнении двух внодов: удалить, заменить, обновить
    1. удалить: newVnode не существует
    2. Замена: vnode и newNode имеют разные типы или ключи
    3. Обновление: иметь тот же тип ключа, но разные vnode и newVnode
  3. При сравнении элементов одного типа React выполняет рендеринг после обновления свойств и рекурсивно сравнивает старый и новый виртуальные дома.
  4. Разница с vue относится к вопросу 17
29. Волоконная архитектура
  1. React использует механизм данных волокна для хранения дополнительной информации о дереве компонентов.
  2. Выполнить рендеринг для первого рендеринга, затем diff, а затем рендерить
  3. Обход дерева рендеринга волокон в глубину: приоритет следующего волокна: дочерний элемент > одноуровневый элемент > parent.sibling
  4. В reconcilerChildren дерево рендеринга волокон создается в соответствии с дочерними элементами, и выполняется diff.Различие здесь также отличается от алгоритма vue diff.vue опирается на некоторые допущения, чтобы заставить два конца оказаться в середине.
  5. Нарисуйте дерево рендеринга волокон В соответствии с порядком приоритетов слой за слоем формируется структура связанного списка, а в рендере создается корневое волокно.
  6. После того, как все волокна выполнены, зафиксируйте, фиксация не может быть прервана, обновите DOM за один раз, найдите родительский узел и выполните соответствующую операцию DOM в соответствии с effectTag на объекте волокна.
  7. приоритет волокна: расчет времени истечения
  8. структура данных волокна:
    1. тип: тип, различать различные волокна, такие как узел функционального класса и т. д.
    2. props: параметры свойств и т. д.
    3. node: настоящий узел dom - null при добавлении
    4. base: сохранить старое волокно для diff - null, если новое
    5. родитель: workInProgressFiber, родительский узел
  9. Резюме простой версии процесса волокна:
    1. Инициализировать подзадачи в рендере
    2. window.requestIdleCallbackВыполнить
      1. Обновите текущий файбер — внутри будет вызываться reconcilerChildren, и каждый файбер будет помечен тегом effectTag
      2. вернуться к следующему волокну
    3. После выполнения задач в дереве рендеринга волокна зафиксируйте и обновите dom в соответствии с effectTag.
30. зачем использовать крючки?
  1. Функциональный компонент перед хуком не имеет состояния и не имеет побочных эффектов и является только простым компонентом отображения.
  2. Недостатки компонентов класса, зачем вводить хуки?
    1. Переиспользовать логику между компонентами сложно, например, при использовании Context необходимо вводить Provider и Consumer слой за слоем.
    2. Сложные компоненты становятся непонятными: хуки разбивают взаимосвязанные части компонента на более мелкие функции
    3. Непонятный класс: типа вот эта проблема в js, какие-то проблемы при построении
  3. Какие изменения произошли с функциональными компонентами после введения хуков?
    1. Функциональные компоненты могут хранить и изменять значения состояния: useState, useReducer
    2. Может выполнять побочные эффекты: useEffect
    3. Логика состояния повторного использования: настраиваемый хук

Интервью Вопрос Ответы

React

Представляем Redux, какую проблему он в основном решает? Как выглядит поток данных? Как управлять несколькими компонентами, используя одно и то же состояние?

Процесс подключения React-Redux к реактивным компонентам

Как промежуточное ПО получает хранилище и действие и как с этим бороться

Что такое промежуточное ПО Redux, принимает несколько параметров

Как ПО промежуточного слоя для избыточных запросов обрабатывает параллелизм

Как обрабатывать асинхронные запросы в Redux

В чем разница между диспетчером состояний Redux и монтированием переменной в окно

Как настроить React-маршрутизатор

Как react-router реализует переключение маршрутов? BrowserRouter как маршрутизатор

Маршрутизация динамически загруженных модулей

Как контролировать маршрут управления во внешнем интерфейсе

Как решить проблемы при использовании маршрутизации

Жизненный цикл React и его собственное понимание, а также модификация жизненного цикла V16

Представляем React-оптимизацию

Принцип делегирования событий компонента React

Сравнение diff, patch, update и vue

Режим React Render Props — перехват рендеринга

import {Button} from 'antd', при упаковке упаковывается только кнопка, и она загружается в модули, как это делается?

При монтировании React есть 3 компонента: textComponent, composeComponent, domComponent, различия и отношения.

Какие изменения произошли внутри компании после изменения структуры Dom в React? непонимание сути проблемы

Является ли setState синхронным или асинхронным?

Как React проверяет и изменяет данные

Какие методы вызовут реакцию на повторный рендеринг

Разница между React15/16.x

Реагируйте на распространенные методы связи

Знакомство с компонентами высшего порядка React

алгоритм сравнения

Волоконная архитектура

зачем использовать крючки?