Борьба с большим опытом и крутое резюме интервью Knorr

предисловие

Читайте мою статью о причинах ухода:Некоторые из моих недавних мыслей после ухода из Могуцзе, а потом пришлось искать работу.

На данный момент я встретился с пятью компаниями: Didi, Ant, Pinduoduo, Kujiale, ByteDance, Pinduoduo и Kujiale в основном получили предложения, Ant завершил второй раунд, Didi и Byte скоро проведут три раунда, я подытожу свой опыт. уже встретился первым, и я подытожу остальные в течение этой недели, надеясь помочь своим одноклассникам, которые ищут работу.

В статье я не только перечислю вопросы интервью, но и дам некоторые предложения по ответам на вопросы.Мои личные возможности ограничены, и я не могу гарантировать, что мои ответы будут правильными.Надеюсь меня поправят, если будут ошибки.

Куджиале

Kujiale была первой компанией, в которой я брал интервью. Я только что закончил собеседование во вторник, прежде чем меня уволили, но меня уволили в пятницу. Может быть, это где-то.

Отдел интервью - это инструментальная группа, которая является основным отделом Kujiale. Интервьюер с четырех сторон сказал мне, что группа, которую я интервьюировал, была основной группой инструментальной группы, и в ней будут задействованы некоторые технологии, связанные с изображением, такие как Three.js, WebGL Подождите, так что эта группа на самом деле довольно хороша, и я чувствую, что могу выучить много методов.

одна сторона (сторона телефона)

• Как вы оптимизируете свой проект?

  Про оптимизацию производительности я писал в резюме, поэтому такой вопрос.

• Что можно сказать о вашем проекте?

  По сути, это осмотр основных моментов проекта, можно сказать, как решаются какие-то трудности проекта, или внедрять какие-то крутые технологии, используемые в проекте.

• В чем преимущества ТС

  Справедливости ради, все преимущества, которые сейчас можно найти в Интернете, связаны сстатический языкПреимущества.

• Разница между типом и интерфейсом

  Это очень часто задаваемый вопрос. Если вы изучаете TS, это должно быть проще всего изучить. Вы также можете найти соответствующую информацию в Интернете, но, скорее всего, вы упустите из виду один момент:type является просто псевдонимом типа и не генерирует тип. Так что на самом деле тип и интерфейс не одно и то же понятие, на самом деле их не следует использовать для сравнения, но иногда они выглядят похоже.

• Реагировать на механизм событий

  Вопросы, на которые я считаю нужным ответить:

  1. Почему React использует синтетические события
  2. Механизм событий: процесс регистрации и распространения. Здесь, по крайней мере, сказать, что регистрация событий находится на верхнем уровне элементаdocumentна узле.

  Использованная литература:Понять принцип механизма событий React в одной статье

• Разговор о различиях в React

  Говоря о различиях. Сначала рекомендуется прочитать статью, которую я написал о виртуальном DOM:Разговор о виртуальном DOM и его ценности из долгой истории React, что помогает понять значение diff.

  Подробности diff можно найти в том, что я писал ранее:Подробно объясните стратегию Diff в React 16.

• Реагировать на оптимизацию

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

• Как понять замыкание

  Основы в основе, хотя экзаменов по социальному набору не так много, но если вы даже не можете понять закрытие, вы должны потерять много баллов. Поскольку замыкания не определены в спецификации, у многих людей разные определения и разные углы понимания, но у них должен быть правильный способ понимания.Согласно моему пониманию, все функции в JavaScript являются замыканиями, потому что в глобальной среде все функции могут доступ к глобальным переменным.

• Как достигается дросселирование?

  Код антишейка и троттлинга все равно нужно писать от руки, это тоже пример замыкания.

• Прототип, класс B наследует класс A Как это должно выглядеть при переводе на es5

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

  Обратите внимание:classЕсть функция перегрузки, как ее вызвать в конструкторе подклассаsuper

Вторая сторона (внутренняя сторона)

• Основы реакции

  UI = f(state) , виртуальный DOM, стратегия сравнения, setState

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

  Этот вопрос тоже высокочастотный, смотрите и отвечайте

• Ключевые понятия редукции

  хранить, уменьшать, действие, actionCreater, отправка

• Поговорим о жизненном цикле React

  Попробуйте сравнить React 15 и 16, а потом почему 16 собирается отменить те жизненные циклы, а новые жизненные циклы можно заменить.

  Поймите лучше эту картинку

  

• Давайте поговорим о том, как хуки справляются с жизненным циклом

  Разумно сказать, что функциональные компоненты не имеют жизненного цикла, но то, как смоделировать роль жизненного цикла компонентов класса, находится вuseEffectОперация выполняется внутри, потому что в основном то, что делается в жизненном цикле, является побочным эффектом, поместите его вuseEffectявляется наиболее подходящим, особенно для борьбы с побочными эффектами.

• Письменный контрольный вопрос один

const a = { b ： 3}

function foo(obj) {
  obj.b = 5

  return obj
}

const aa = foo(a)

console.log(a.b)

console.log(aa.b)

• Второй письменный контрольный вопрос:

function Ofo() {}

function Bick() {
	this.name = 'mybick'
}

var myBick = new Ofo()

Ofo.prototype = new Bick()

var youbick = new Bick()

console.log(myBick.name)

console.log(youbick.name)

• Письменный контрольный вопрос 3: рассмотрите коробочную модель иbox-sizingАтрибуты для определения размера и цвета элемента.

• Реализуйте функцию заполнения без циклов.

  Изучить рекурсию

• Реализация частных переменных с помощью ES5

  Изучите использование замыканий

Три стороны (сторона на месте)

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

  Уменьшить частоту запросов, сжатие изображений,React.memo,React.useMemo

• Как сделать оптимизацию производительности в компонентах класса (потому что ранее я говорил, что использовал React.memo для оптимизации производительности)

  shouldComponentUpdate (сокращенно SCU). SCU тесно связан с immutable.Вы должны понимать неизменяемость реакции.В противном случае вы можете не понять, почему вы не можете напрямую изменить состояние, а затем перейти к setState, а редюсер redux должен возвращать новый объект.

• Реализовать выбор в машинописном тексте

  type Pick<T, K extends keyof T> = { [P in K]: T[P] }

• Рукописное обещание.все

• Рукописный параллелизм может быть только 10

• Алгоритмический вопрос, как судить о пересечении односвязных списков.

  Есть много способов, я говорил, что если последний узел такой же, то он представляет собой пересечение.

• Задача алгоритма, как найти первый пересекающийся узел.

  Одновременно пройдите два связанных списка до конца и одновременно запишите длину двух связанных списков. Если последний узел двух связанных списков один и тот же, два связанных списка пересекаются. Имея длину двух связанных списков, мы можем узнать, какой связанный список длиннее.Пусть длина более длинного связанного списка будет len1, а длина короткого связанного списка будет len2. Затем пусть более длинный связанный список переместится назад на длину (len1-len2). Затем начните обход двух связанных списков одновременно с текущей позиции.Когда узлы пройденных связанных списков совпадают, этот узел является первым пересекающимся узлом.

  Это способ, о котором я только что подумал, но я помню, что это было проще, когда я брал интервью, но я не могу его вспомнить.

Четыре стороны (сторона на месте)

• Как вы относитесь к своей популярности в компании?

• Как вы думаете, что вы сделали для своей группы?

• зачем уходить

• Вы инвестировали в другие компании помимо нашей компании?

• Каковы требования к зарплате и уровню

• Как центрировать по вертикали и по горизонтали

• Вы смотрели исходный код библиотеки с открытым исходным кодом?

• Затем вы рассказываете об исходном коде React и рассказываете о том, что помните.

  Я видел часть исходного кода React, поэтому могу сказать кое-что об обновленной части исходного кода React.

• Каковы свойства FiberNode

• Какая польза от stadeNode?

• Есть некоторые технические проблемы, которые я не могу вспомнить

резюме

Впечатление от собеседования в Куцзяле было хорошим. У меня было собеседование по телефону. После собеседования я чувствовал себя хорошо. Я позвонил в компанию для собеседования на месте. Закончив работу в 6:30, я поехал в Куцзяле на велосипеде. три стороны, я не успела поесть, но интервьюер очень хорошо налил мне воды.

Я чувствую, что интервьюер не очень интересуется моим проектом, и редко спрашивает о проекте.Может быть, потому что они инструментальная группа, они даже не встретили библиотеку компонентов в моем резюме.Базовых проверок много, а базовая проверка является относительно всеобъемлющим.

Однако из-за несложности проектов, которые я делал раньше, и проблемы с выслугой лет, рейтинг давался невысокий, поэтому и зарплата была не особо высокой, но это уже был пик этого рейтинга. Лучшее предложение Cool Home Le по-прежнему очень полезно, особенно группа инструментов.

Пиндуодуо

одна сторона

• Что изменилось в жизненном цикле реакции 16

  componentWillMount,componentWillReceiveProps,componentWillUpdateГотов отменить, добавилstatic getDerivedStateFromPropsа такжеgetSnapshotBeforeUpdate

  Я также подробно объяснил, почемуgetDerivedStateFromPropsЧтобы заменить три жизненных цикла, которые собираются отменить, в основном жизненный цикл до версии 16 рендеринга может выполняться несколько раз.Подробности см. В этой моей статье:Глубоко в React об архитектуре React Fiber (1)

• Подробно представитьgetDerivedStateFromProps

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

• flex: 0 1 auto;Что значит?

  flex является распространенным тестовым вопросом для этого атрибута Хорошо прочитайте статью г-на Руана.статьи о гибкой грамматикеПосле прочтения гибких вопросов на собеседовании проблем не возникает.

• Что означает & in less?

• Задача алгоритма: найти самый большой общий префикс, например['aaafsd', 'aawwewer', 'aaddfff'] => 'aa'

  Его нельзя отладить, он полностью зависит от грамотности программирования, и запустить его может только интервьюер.

• Разница между интерфейсом и типом

  Проверь еще раз, ответ выше

• Полезно ли это для управления государством?

  Я обычно использую redux и dva, а потом рассказываю о концепции различения redux

• сср работает?

  Не используется

• Вы знакомы с узлом?

  пиши меньше

две стороны

• Разница между компонентами класса и функциональными компонентами

  Жизненный цикл, концепция дизайна, я чувствую, что этот вопрос относительно разработан, вы можете посмотреть эту статью Дэна:Чем функциональные компоненты отличаются от компонентов класса?

• css-приоритет

  важно > встроенный > селектор ID > селектор класса > селектор тегов

• Избегайте глобального загрязнения css.

  Мои часто используемые модули css

• Принцип css модулей

  Создание уникальных имен классов

• Есть тег, как динамически определять его стиль.

  Я сказал, как сначала написать несколько css, а затем передать префикс извне. Интервьюер спрашивал об этом? Я сказал, что его можно передать через контекстный метод, поэтому не нужно передавать каждый компонент.

• Разница между import и require import

  Часто задаваемые вопросы, исследуйте разницу между модулями ES6 и модулями CommonJS. Ключевые моменты: 1. Первое — это ссылка на значение, а второе — его копия. 2. Первый выводит интерфейс во время компиляции, а второй загружает во время выполнения.

  рекомендуемая статья:Модульность интерфейса: CommonJS, AMD, CMD, ES6.

• В чем проблема производительности с require

  Подумайте о разнице между предыдущим вопросом, и вы можете думать об этом

• Как выполнить загрузку библиотек компонентов по требованию

  я обычно используюbabel-plugin-import

• Как webpack реализует динамическую загрузку

  Справедливости ради, есть два способа динамической загрузки webpack:import()а такжеrequire.ensure, но принцип их реализации одинаков.

  Я думаю, что смысл этого вопроса в том, чтобы динамически создавать теги сценария и передаватьjsonpзапроситьchunk, рекомендуемые статьи:Как webpack реализует динамический импорт

• Есть ли в реакции динамически загружаемый API?

  React.lazy

• Каков принцип React.lazy?

• Может ли webpack динамически загружать модули, импортированные по требованию?

  Это не должно быть возможно.Как упоминалось ранее, веб-пакет поддерживает динамический импорт.По сути, его можно только использовать.import()а такжеrequire.ensure.

• Может ли веб-пакет, импортированный по запросу, выполнять Tree Shaking?

  Нет, Tree Shaking требует статического анализа, который поддерживается только модулями ES6.

• Определите, какие свойства необходимы компоненту ввода. Я сказал значение, значение по умолчанию, onChange

• Что такое тип значения?

• Как onChange указывает тип значения

• Разница между интерфейсом и типом

• Напишите функцию повторных попыток обещания, чтобы установить временной интервал и количество раз.function foo(fn, interval, times) {}

  Обычные вопросы, есть справочные ответы онлайн.

Три стороны

• Каковы функции компонентной платформы?

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

• реализовать сокращение

  выполнитьcreateStoreфункция, функция ключевой точки публикации и подписки и функция отказа от подписки.

• Реализовать редукцию с помощью ts

  Просто добавьте тип, тип, который я написал, не такой сложный, как исходный код редукса, и в то время он был относительно простым.

подраздел

Когда я был на одной стороне, я на самом деле чувствовал, что мой ответ был не очень, и я даже забыл синтаксис less.В то время мне было холодно, когда я был лицом вниз, и действительно было слишком мало времени для написания стилей. .

Мне посчастливилось передать его мне.Я чувствовал, что интервьюер на втором собеседовании был очень профессиональным.В основном они рассматривали глубину знаний от более мелкого к более глубокому.Стараюсь быть как можно более глубоким,а я редко трачу время, если мне это пока не нужно, поэтому моих текущих знаний очень не хватает.Мои способности в node, ssr, мобильном терминале и небольших программах очень слабы, но если вы не знакомы с этим во время интервью, Просто скажите, что вы с ним не знакомы, и он не станет встречаться.

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

Глядя вниз, я чувствую, что Pinduoduo не так сложен, как я себе представлял.Хотя зарплата Pinduoduo считается самой высокой в ​​отрасли, Pinduoduo находится в Шанхае, я в Ханчжоу, и я вынужден работать по 6-дневной смене. больше этого боюсь. Учитывая, что мы с моей девушкой находимся в разных местах, если мы возьмем один отпуск, а праздников будет меньше, чем обычно, то и возможностей встретиться будет меньше.

В любом случае, вы должны попытаться рассмотреть такие вещи, как предложение комплексно, включая команду, зарплату и личную жизнь.

наконец

Я Тао Вэн, думающий фронтендер, с нетерпением жду вашего внимания.

Если вы ищете работу в последнее время, вы можете связаться со мной.Ниже мой официальный аккаунт.