Эта статьяHuaguoshan dasheng.Некоторое время назад я поделился черновиком текста в Zaozaochao ради разрешений командной учетной записи.

Видео версияПожалуйста, перейдите на станцию ​​B

Идеи дизайна фреймворка React и Vue big PK

Эта статья является 17-й сессией сеанса раннего чата, а также 122-й сессией раннего утреннего чата.

обо мне

Привет всем, я Великий Мудрец горы Хуаго. Сегодня для меня большая честь иметь возможность поделиться с вами темой, которая интересует многих молодых людей "Идеи дизайна Vue и React PK". Мой личный уровень ограничен. После прочтения это, перейдите к исходному коду Vue и React, чтобы изучить, вы обязательно что-то получите.Если у вас нет времени, вы также можете встать пораньше, чтобы учиться со мной.

1. Github
2. Станция Б
3. Наггетс

Обзор фреймворка

Фронтенд-фреймворков много, и мы тоже будем путаться при изучении.Мы должны захватить самый мейнстримный контент Vue/React, углубиться в нижний слой, попытаться разобраться в дизайнерских идеях авторов фреймворка и расширить их кругозор. горизонты. Не ограничивайте себя фреймворком. Я думаю, что когда мы используем Vue в своей работе, мы чувствуем, что React бесполезен для изучения. Иногда мы изучаем фреймворк конкурирующих продуктов, чтобы лучше понять фреймворк, который используем. бред, потому что Vue сам по себе умеренный фреймворк. , а потом узнайте Angular и Svelte, у которых самые экстремальные дизайнерские идеи. Давайте взглянем на четыре самых популярных фреймворка в слое представления.

Загрузки

Контрастное измерение

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

разработка фреймворка

шаблон строки

Если вы хотите увидеть текущий статус уровня представления, вам нужно кратко взглянуть на путь разработки предыдущей платформы.Большинство слоев рендеринга в эпоху JQuery основаны на строковых шаблонах.Обычными платформами являются Underscore и baiduTemplate. Общий принцип — разобрать шаблон на функцию, недостаток тоже очевиден, то есть каждый раз при изменении данных внутренности шаблона приходится перерисовывать.

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

Родной против абстрактного

Нативным является сам JavaScript. Например, в JQuery в принципе не так уж много абстракций. В мире доминирует один $. React немного более абстрактен. Вам нужно понимать компоненты, состояния, хуки, JSX и другие концепции, чтобы начать работу. более абстрактным является Angular. Чтобы начать работу, вам нужно понять более десятка концепций, а кривая обучения очень крутая. Vue находится посередине React и Angular. После понимания данных, методов и формирования одного файла вы можно начать

Время выполнения против прекомпиляции

Другим измерением является измерение времени выполнения и предварительной компиляции.Так называемое время выполнения — это задача, выполняемая в памяти браузера.Среда выполнения React тяжелее.После изменения данных он не оперирует DOM напрямую, а генерирует новый 1. Виртуальный дом, а минимальное поведение при работе достигается с помощью алгоритма сравнения, все из которых выполняются во время выполнения.

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

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

Размеры рамной конструкции

Вью и Реагируй

Затем мы вытащили Vue и React с некоторыми более уточненными размерами.

Изменяемые данные против неизменяемых данных

Vue1 — играть с чувствительными данными. С помощью операций перехвата измените данные при сборе зависимостей, а затем уведомите дом об обновлении при изменении данных. Опыт очень удобен. Мы изменяем объект JavaScript, и уровень представления изменяется. , это черная магия Vue.Дата, когда был создан виртуальный дом React, предназначена для определения того, какой дом будет работать, путем расчета разницы между новыми и старыми данными, поэтому каждый раз, когда данные изменяются, новые данные должны генерировать, что не оптимально. Хуже, но маршрут другой

Вероятно, это сравнение кода Vue и React, изменяющих данные.

компромисс

Поскольку приложение становится все более и более сложным, в архитектуре React15 время сравнения dom превышает 16,6 мс, что может привести к зависанию страницы. Слишком много слушателей в Vue1 также приведет к лавине производительности. Чтобы решить эту проблему, Vue выбрал Компромисс заключается в том, что компонент используется в качестве гранулярности, на уровне компонента используется отзывчивое уведомление, а компонент вычисляется с помощью dom diff, который не только контролирует количество наблюдателей в приложении, но также контролирует величину dom. диф. Когда я увидел это осознание, я не просто закричал, это было прекрасно

  registerComponentHook(componentId, 'lifecycle', 'attach', () => {
    callHook(vm, 'beforeMount')

    const updateComponent = () => {
      vm._update(vm._vnode, false)
    }
    new Watcher(vm, updateComponent, noop, null, true)

    vm._isMounted = true
    callHook(vm, 'mounted')
  })

Предварительная компиляция и среда выполнения

Соответствующие понятия популяризировались только сейчас.Воплощение во Vue и React в основном отражается в разнице между JSX и шаблоном.React - это полноценный JSX, и JSX может писать в нем JavaScipt, так что характеристика достаточно динамичная, а соответствующая - Шаблон Vue, шаблон характеризуется ограниченным синтаксисом и технологией исполняемого синтаксиса.v-if v-forУказанный синтаксис недостаточно динамичен, но поскольку синтаксис удобен, вы можете делать больше прогнозов на уровне перед компиляцией, чтобы Vue имел лучшую производительность во время выполнения.

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

1. Чисто статическая разметка элемента, напрямую пропускающая этап сравнения, например.<p>hello</p>
2. Статические атрибуты также помечаются, и оценка этого атрибута пропускается при различении
3. Кэш добавляется при передаче функции события
4. v-ifа такжеv-forВнутренне поддерживать динамические элементы с помощью массива block+

квант времени

Vue3 контролирует степень детализации различий с помощью статической разметки + отзывчивости + виртуального дома, так что время сравнения не будет превышать 16 мс, но процесс сравнения сверху вниз React после того, как проект станет большим, когда время сравнения превысит 16,6 мс, это вызовет заикание, и решение, предоставляемое React, заключается в сокращении времени

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

Эволюция дизайн-мышления

Композиция лучше интеграции

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

охватывать

Мы только что упомянули, что Svelte может быть напрямую скомпилирован в JavaScript, а производительность близка к нативной. С такой отличной идеей, почему Vue сохраняет дополнительные потери во время выполнения виртуального дома? С текущей точки зрения, я думаю, что это более важный ответ.

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

рассмотрение

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

а

Наконец, я рекомендую четвертое издание книги «Алгоритмы», которая больше всего помогла мне с повышением моей зарплаты.

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

Конечно, помимо короля, мое самое большое хобби - это чтение книг.На самом деле есть много книг, которые можно порекомендовать, например,

1. JavaScript расширенный красный, желтый и зеленый три набора книг
2. «Что такое переговоры» и «Переговоры о преимуществах» о том, как вести переговоры о деньгах с HR
3. Обязательная баночка для хвастовства перед продакт-менеджерами, «Вершина волны» и «Тайна Силиконовой долины».
4. «Мягкие навыки 2»
5. . . . .

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

---

Не забудьте поставить лайк статье. Вы также можете обратить внимание на публичный аккаунт [Front of Huaguo Mountain] и мою станцию ​​B. В будущем будет загружено больше оригинальных видео.