Собеседование по телефону с сотрудниками UF Autumn Recruitment

опрос
Собеседование по телефону с сотрудниками UF Autumn Recruitment

Я всегда видел название UFIDA на Niuke.com, поэтому я отправил свое резюме ... Я отправил свое резюме 8.27, прошел письменный онлайн-тест 8.31, получил телефонное интервью в 10:00 9:18 и видеоинтервью в 14:00 9.19.

19.9.14:40 Обновление:Только что закончил видеоинтервью.Оказался HR-интервью.Чувствую себя хорошей сестрой HR(да)(ма).Поболтав больше десяти минут, я спросил меня о различия в жизни между севером и югом как уроженца Гуанчжоу.Каково ваше мнение...

Понятно, что отдел интервьюера использует фреймворк React для разработки, поэтому задаваемые вопросы больше касаются React.Ниже приведены вопросы, заданные интервьюером.

1. Расскажите, пожалуйста, чем отличаются два фреймворка Vue и React, их преимущества и недостатки

  • В общем:

Привязка данных Vue основана на перехвате данныхObject.defineProperty()серединаgetterа такжеsetterтак же как发布订阅模式（eventEmitter）прослушивать изменения значения, чтобыvirtual DOMводить машинуModel层а такжеView层обновить, использоватьv-modelЭтот синтаксический сахар упрощает реализацию двусторонней привязки данных. Этот режим называетсяMVVM: M <=> VM <=> V. Но суть все равноState->View->Actionsоднонаправленный поток данных, просто используяv-modelНет необходимости явно писать из视图层прибытьModelПросто обновите слои.

React должен полагаться наonChange()/setState()режим для достижения двусторонней привязки данных, потому что он был разработан как односторонний поток данных в начале его рождения.

  • Различия в компонентной связи:

Между отцом и сыном могут пройти обаpropsсвязыватьdataилиstateдля передачи значения или передать значение, привязав функцию обратного вызова.

Компоненты Brother можно использовать с помощью发布订阅模式НапишиEventBusКонтролировать изменения в стоимости.

Межуровневый: доступен в ReactReact.contextдля связи между слоями. Во Vue новый механизм предоставления/вставки версии 2.2.0 можно использовать для вставки данных между слоями.

  • Различия в том, как отображаются шаблоны:

React использует собственный синтаксис JS в JSX для интерполяции, условного рендеринга, циклического рендеринга и многого другого.

Vue, с другой стороны, должен полагаться на инструкции, которые проще в использовании, но имеют более высокую степень инкапсуляции, более высокие затраты на отладку и трудности с поиском ошибок.

  • Разница в производительности:

Обновление рендеринга компонентов в React заключается в повторном рендеринге слой за слоем от корневого компонента, данные которого изменились, до дочерних компонентов, и жизненный цикл компонента изменился.shouldComponentUpdate()Функция предназначена для разработчиков, чтобы оптимизировать компонент, чтобы он возвращался, когда его не нужно обновлять.false

А в Vue это черезwatcherПрослушав смену данных, передайте своиdiffалгоритм, вvirtualDomНайдите самый дешевый способ обновить вид прямо в .

  • Так что в целом Vue больше подходит для относительно небольших проектов с более короткими циклами разработки, а React больше подходит для создания стабильных и масштабных приложений с более широкими возможностями настройки.

2. Разница между односторонним потоком данных и двусторонней привязкой данных имеет свои преимущества и недостатки.

  • Однонаправленный поток данных

Преимущества: все обновления состояния легче отслеживать, источник легко отследить, и это более удобно для обслуживания.

Недостатки: вы можете только вручную записывать обновления со слоя представления на слой данных, что увеличивает объем кода.

  • Двусторонняя привязка данных:

Преимущества: инфраструктура неявно помогает мне реализовать совместное обновление уровня представления и уровня данных, а код стал более лаконичным.

Недостатки: отладка высоты пакета «Black-Box» Увеличение сложности в присущих направлении потока данных становится трудно понять.

3. Расскажите мне о своем понимании Redux

В этот раз я рассказал о редуксе, используемом в проекте стажировки компании, а также сказал причину введения редукса для проекта в то время, и я посчитал, что он слишком раздут, например, просто для сохранения просматриваемой в данный момент страницы число для текущей страницы, используйте Значение, передаваемое между компонентами, может заменить функцию раздутого редукции в проекте. Итак, интервьюер задал следующие вопросы.

Можно использоватьReact.contextзаменить функцию редукции.

4. Расскажите о методе связи между компонентами реакции

  1. Передача значений от родителя к дочернему: Используя реквизиты, поведение родительского компонента запускает соответствующую функцию для изменения состояния.Реквизиты зависят от состояния текущего родительского компонента, а реквизиты дочернего компонента также получают переданные значение соответственно.
  2. Передача значений от дочернего к родительскому: реквизиты дочернего компонента указывают на функцию обратного вызова, поведение дочернего компонента запускает функцию указанного реквизита, и функция передается функции обратного вызова родительского компонента для получения параметров для получения переданное значение.
  3. Брат по значению: найдите общий дочерний компонент или общий родительский компонент для передачи по значению; используйте React.context для передачи значения; используйте Redux

5. Расскажите о жизненном цикле реакции

mount -> update -> unmountФункции жизненного цикла, которые вызываются в соответствии с порядком жизненного цикла:

  1. устанавливать

constructor()

componentWillMount()Вызывается перед первым рендером

render()

componentDidMount()Вызывается после рендеринга

  1. возобновить

shouldComponentUpdate()Возвращает логическое значение, вызываемое при получении новых свойств или состояния.

componentWillUpdate()Вызывается перед рендерингом

render()

componentDidUpdate()Вызывается после завершения обновления компонента, а не во время инициализации.

  1. удалить

componentWillUnmount()Вызывается, когда компонент удаляется из DOM

Как оптимизировать производительность компонента реакции

Я прямо говорил о различных методах оптимизации производительности веб-интерфейса, в том числе: использование кеша, сокращение HTTP-запросов, использование изображений спрайтов, сокращение ненужных операций DOM, сжатие файлов css и js... Я не чувствую, что ответил на вопрос. На самом деле существует набор методов оптимизации производительности для реактивных компонентов.

  1. Сократите количество визуализируемых узлов, уменьшите сложность рендеринга обновлений компонентов и не выполняйте ненужные вычисления в функции рендеринга.
  2. Уменьшите ненужную вложенность, ад вложенности вызовет серьезные проблемы с производительностью.
  3. Уменьшите количество setState и попробуйте сделать это за один шаг.
  4. Используйте фиктивный список для компонентов, которым требуется прокручиваемый список из множества элементов.react-virtualized
  5. Избегайте использования стрелочных функций непосредственно в качестве обработчиков событий, так как новый обработчик событий создается заново при каждом рендеринге.
  6. Воспользуйтесь преимуществами функций жизненного циклаshouldComponentUpdate()Компонент управления возвращает эту функцию, когда повторный рендеринг не требуется.false
  7. использовать наследованиеReact.pureComponentзаменятьReact.ComponentВ настоящее время рендеринг обновления основан на неглубоком сравнении, то есть на проверке того, изменился ли ссылочный адрес данных.

Какими свойствами обладает флекс

Разговор о коде состояния http

Расскажите, что нового в es6?

Отличие стрелочных функций от обычных функций

  1. Стрелочные функции эквивалентны анонимным функциям и не могут использоваться в качестве конструкторов и не могут использоватьсяnew.
  2. Стрелочные функции неarguments, поэтому используйте оператор спреда для решения.
  3. Стрелочные функции не будут изменять указатель this в зависимости от вызывающего его объекта, но всегда будут указывать на this в текущем контексте.

Понимание замыканий

область переменных js имеет глобальные переменные и локальные переменные

Глобальные переменные можно читать прямо внутри функции

Локальные переменные внутри функции не могут быть прочитаны вне функции, потому что после выполнения функции среда внутри функции уничтожается.

Если функция не используется внутриvarОбъявление переменной фактически объявляет ее глобальной переменной.

Замыкание — это функция, которая может считывать переменные внутри внешней функции и, наконец, внешней функции.returnЭта внутренняя функция, затем генерируется замыкание.

Об утечках памяти

Механизм сборки мусора js реализован на основе подсчета ссылок. После запуска функции внутренние переменные будут автоматически уничтожены, а после генерации замыкания ссылка на локальную переменную во внешней функции станет циклической ссылкой, которая не будет захвачена и уничтожена механизмом сборки мусора, так что это вызывает утечку памяти, если функция закрытия вручную=nullРазыменуйте его и освободите память, эта часть всегда будет существоватьruntimeв памяти.

Понимание цепочки прототипов

Доступ к свойству объекта, если свойство не существует внутри объекта, к нему будет осуществлен доступ__proto__, если вы все еще не можете его найти, продолжайте получать к нему доступ__proto__свойства, знатьnullдо.

Метод и отличие перехвата строки js

String.prototype.substr()

Параметр 1: начальный индекс Параметр 2: длина

String.prototype.substring()

Параметр 1: начальный индекс Параметр 2: конечный индекс

String.prototype.slice()

Параметр 1: начальный индекс Параметр 2: конечный индекс

Не изменять исходную строку, а возвращать измененную строку Подробнее см. в MDN.

Методы обхода массива и отличия

for循环

Array.prototype.forEach((element)=>{...})Не изменяет исходный массив, нет возвращаемого значения

Array.prototype.map((element)=>{...})Возвращает новый массив без изменения исходного массива

Array.prototype.filter((element)=>{condition})Возвращает новый массив без изменения исходного массива

Array.prototype.reduce((previousValue,currentValue,currentIndex))Не изменять исходный массив, возвращать возвращаемое значение последней выполненной функции обратного вызова.

междоменное решение

  1. JSONP
  2. CORS
  3. Переадресация запросов с помощью обратного прокси-сервера NGINX
  4. document.domain + перекрестный домен iframe
  5. location.hash + междоменный iframe
  6. междоменное окно.имя + iframe
  7. postMessage
  8. nodejs как кросс-доменный прокси промежуточного программного обеспечения
  9. Междоменный протокол WebSocket

говорить о кеше

Разница между мобильным телефоном и ПК

Оптимизация производительности мобильных страниц

Разница между Link и @import

  • ссылка импортируется из html, импорт импортируется из css
  • Ссылка будет загружать CSS синхронно, когда браузер загружает страницу; загружайте импортированный CSS после загрузки страницы.
  • приоритетная ссылка > импорт
  • import — это синтаксис, добавленный CSS2.1, его может распознать только IE5+, и у Link нет проблем с совместимостью.
  • Веса!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符

Разница между асинхронным и обещанием

  1. Функции, использующие асинхронность, всегда возвращают объект обещания.
  2. await необходимо использовать с асинхронными функциями
  3. await необходимо использовать перед обещанием, что заставит обещание возвращать параметры разрешения
  4. После использования Async AWAIT оборачивает Promise, асинхронный процесс становится синхронизированным.
  5. Сценарий использования: Async и await можно использовать, когда существуют зависимости между несколькими обещаниями
  6. Ожидаемое обещание может быть обернуто после его асинхронной функции..catch()обрабатывать ошибки

Использование git, как разрешить конфликты слияния

  • пройти черезgit diffСм. различия между двумя ветвями
  • merge conflictПосле генерации выберите удаление или сохранение конфликтующего кода, вручную сравнив конфликтующие части в файле, затем повторно объедините и зафиксируйте
  • Используйте графические инструменты, такие как Gitup Desktop, Git GUI.

Разница между git rebase и слиянием

  • У двух команд одна и та же цель, и, в конце концов, все они предназначены для слияния только что отправленного кода с обновленной веткой.
  • Процесс осуществляется по-разному:
    • rebaseИзменит базовую линию текущей ветки, сначала найдет ветку цели слияния и ближайший общий узел текущей ветки разработчика, затем отменит новую фиксацию текущей ветки и сохранит изменения в.git/rebaseи обновите текущую ветвь до целевой, а затем примените новые изменения фиксации к текущей ветке.
    • mergeсоздаст новыйmerge commit.
Категории