Личный опыт использования vue and react

Я также жил в Нанкине Санбайюнь в течение трех лет, из невежественного студента колледжа в более зрелого молодого человека.За последние три года я также сделал много проектов.reactТакже естьvueСтек технологий, позвольте мне рассказать о моих взглядах на эти два основных фреймворка.reactиvueЛагерь был один за другим, и в этот момент я, кажется, слышу пренебрежительное отношение коллеги Vue 1: «А? в этот момент)

1. Панорама

Скриншот из онлайн-класса учителя Dasheng в открытом баре

2. Фон

реагировать: профессиональный

реагировать родился в 2011 году (FaxJS),
3 июля 2013 г. v0.3.0
30 марта 2016 г. v0.14.8
9 апреля 2016 г. v15.0.0
27 сентября 2017 г. v16.0.0, официальное рождение волокна
В 2019 году выпущенная версия 16.8 официально поддерживает синтаксис хуков.
22 октября 2020 г. v17

Решать проблему

ReactДля решения какой проблемы используется, официальный сайт говорит: We build React to solve one problem:building large applications with data that changes over time.

вью: легенда

Он начинался как личный проект в 2013 году, но теперь он стал одним из трех основных интерфейсных фреймворков в мире и первым выбором для фронтенда в материковом Китае. (Интервьюер спросил: Почему вы научились использовать Vue? Ответ: Из-за патриотизма!)

2013 год,существуетGoogleЮ Юси, которая работает, былаAngularВдохновленный , я извлек из него те части, которые мне понравились, и разработал облегченный фреймворк, изначально названный какSeed.
Декабрь того же года, семя проросло, переименованоVue(Поскольку это библиотека слоев представления, а vue по-французски означает представление), номер версии — 0.6.0.
2014.01.24,VueОфициально выпущена, номер версии 0.8.0.
опубликовано2014.02.250.9.0, имеет собственное кодовое имя:Animatrix, название происходит от анимационной версии «Матрицы», после этого важные версии будут иметь собственные кодовые имена.
0.12.0 выпущен в2015.06.13, кодовое названиеDragon Ball(Жемчуг дракона), в этом году,Vueпроизошел большой взрыв,Laravelсообщество (популярноеPHPсообщество фреймворка) первое использование Vue,VueсуществуетJSСообщество также сделало себе имя.
1.0.0 Evangelion(Евангелион) ДаVueПервая веха в истории. тот же год,vue-router(2015-08-18),vuex(2015-11-28),vue-cli(2015-12-27) были выпущены последовательно, отмечаяVueПревратился из библиотеки слоев представления в прогрессивную структуру. Многие передовые студенты также сталиVueПользователь(vue1чистый отзывчивый).
1 октября 2016 г. 2.0.0 Ghost in the Shell(Призрак в доспехах) стал второй крупной вехой, вобравшей в себяReactизVirtual DomРешение также поддерживает рендеринг на стороне сервера.
4 февраля 2019 г.Задолго до выпуска 2.6 основная команда Vue была занята разработкой vue-cli3.0, накопила большой спрос и выпустила его.vue2Предпоследняя версия (выпущена в 2020 году)
18 сентября 2020 г.с участиемБыть быстрообучаемой и доступной структурой для всехобязанностьvue3Он уже здесь, и в том же году был запущен инструмент для упаковки нового поколения.vite(может быть заменено в будущемwebpack)

Базовая карта масс Vue выглядит следующим образом:

3. Техническая мысль

React — это функциональная идея в целом.Компоненты используют синтаксис jsx, все на js, а html и css все интегрированы в javaScript.Синтаксис jsx относительно более гибкий.

Общая идея Vue по-прежнему заключается в том, чтобы охватить классическую форму html (структура) + css (производительность) + js (поведение).Vue поощряет разработчиков использовать шаблоны шаблонов и предоставляет инструкции для разработчиков, такие как v-if, v-show, v-for и другие инструкции, поэтому при разработке Vue-приложений будет ощущение написания классических веб-приложений (разделение структуры, представления и поведения).

Некоторое старомодное управление данными (реквизиты, данные и состояние), написание компонентов и т. д. не будут здесь сравниваться.

1. Сходства и различия ключей на примере

1,reactиvueдобавить в списокkeyКонечная цель задачи та же: точнее и быстрееoldVnodeсоответствующийvnodeузла для повышения производительности. Но есть некоторые различия в алгоритмах, которые они реализуют.

react

ReactПри рендеринге массива, если дочерний компонент не указанkey, будет зацикливаться по умолчаниюindexв видеkeyбудет использоваться для первого рендера. Исходный код, по сути, представляет собой метод сравнения грубой силы: поскольку волокно с односвязным списком не может использовать алгоритм двойного указателя, невозможно использовать оптимизацию двойного указателя для алгоритма. В общем, есть два раунда обхода, первый раунд обхода: обработка обновленных узлов. Второй раунд обхода: обработайте оставшиеся узлы, которые не являются частью обновления.

Чтобы уменьшить сложность алгоритма,ReactизdiffПредустановлены лимиты:

только на родственных элементахDiff. еслиDOMУзел пересекает уровень в двух обновлениях до и после, затемReactНе буду пытаться использовать его повторно.
Два разных типа элементов создают разные деревья. если элемент состоит изdivстатьp,Reactуничтожитdivи его узлы-потомки, и создать новый p и его узлы-потомки.
судить первымkeyсудить сноваtype, если они одинаковы, то это один и тот же узел. Обновить > Добавить/удалить

vue

vueсуществуетdiffпроизводительность лучше, чемreact, когда я внимательно читаю исходный код и книги, я очень восхищаюсь этим,Алгоритм алкогольных напитков. Самая длинная возрастающая подпоследовательностьНапример: взять массив[2, 11, 6, 8, 1]Например: окончательный результат вывода[0, 2, 3], что указывает на то, что индексы наиболее сильно растущих последовательностей равны 0, 2 и 3 соответственно, соответствующие значения равны 2, 6 и 8. Другими словами, в этом массивесамый продолжительный непрерывный ростЗначением являются три элемента 2, 6 и 8 в массиве.

Итак, какова цель использования этого метода для vue3, чтобы тратить столько усилий? В процессе DOM-Diff Vue2 отдает приоритет специальным сценариям, то есть прямому сравнению, прямому сравнению, прямому сравнению и т. д.

иVue3существуетDOM-Diffпроцесс, согласноnewIndexToOldIndexMap Найдите самую длинную стабильную последовательность из списка старых и новых индексов узлов., посредством алгоритма сравнения самой длинной растущей подпоследовательности, узнать узлы, которые не нужно перемещать в старых и новых узлах, повторно использовать их на месте, только для узлов, которые необходимо переместить или были перемещеныpatch(Добавление операций, таких как удаление узлов) Узлы работают, чтобы максимизировать эффективность замены, что является качественным улучшением по сравнению с версией Vue2!

2. Сравнение макросов diff

react

существуетreactЕсли состояние компонента изменилось,reactЭтот компонент и все его потомки будут повторно визуализированы, но повторная визуализация не означает, что все предыдущие результаты визуализации будут отброшены.reactвсе равно пройдетdiffдважды сравнить манекенdomНаконецpatchк реальномуdomначальство. Тем не менее, если дерево компонентов слишком велико,diffНа самом деле, некоторые расходы все равно будут. реагировать внутренне черезfiberоптимизацияdiffАлгоритмы, внешне рекомендуемые для использования разработчикамиshouldComponentUpdate pureComponentчтобы избежать проблемы.

vue

vue2отзывчивостьObject.definePropertyреализовано и переписаноgetter``setterДождитесь серии операций для реализации паттерна наблюдателя.reactТаким же образом можно сравнить все дерево компонентов, но обновить экземпляр компонента, состояние данных которого изменилось.

3. Жизненный цикл

жизненный цикл реакции

old 15.x-16

триггерная фаза	жизненный цикл ядра реакции
горная сцена	конструктор, componentWillMount, визуализация, componentDidMount,
процесс обновления	componentWillReceiveProps, shouldComponentUpdate, визуализация, componentDidUpdate
этап удаления	componentWillUnMount

new 16+

триггерная фаза	жизненный цикл ядра реакции
горная сцена	конструктор,getDerivedStateFormProps, визуализация, компонентDidMount
процесс обновления	getDerivedStateFormProps,getSnapshotBeforeUpdate, shouldComponentUpdate, визуализация, componentDidUpdate
этап удаления	componentWillUnmount

Другое: компонентДидКатч

Именование жизненного цикла React всегда было очень семантическим (шепотом bb: действительно вонючим, длинным и трудным для запоминания)

жизненный цикл

API опций	Hook inside setup
beforeCreate
created
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount(vue2 beforeDestory)	onBeforeUnmount
unmounted(vue2 destoryed)	onUnmounted
errorCaptured	onErrorCaptured
renderTracked(отслеживание состояния vue3)	onRenderTracked
renderTriggered(триггер состояния vue3)	onRenderTriggered
activated	onActivated
deactivated	onDeactivated

4. Функциональное программирование

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

react hooks

Оригинальный утомительный жизненный цикл compomentDidUpdate="useEffect", хотя и не совсем такой же, но в большинстве сценариев, с точки зрения разработчика, нас больше беспокоят последствия (побочные эффекты) изменения данных в реквизитах или состоянии. сохраняет собственный процесс разработчика сравнения значений до и после. (Это должно быть реакцией, чтобы учиться у vue watch)

vue3 комбинированный API

Комбинированный API vue3 опирается на некоторые идеи в хуках реагирования.Надо сказать, что синий лучше синего.Кроме того, сам фреймворк проделал большую работу по оптимизации, что несравнимо с реагированием с точки зрения представление.

react	vue
useState, ссылка	реактивный, исх.
useEffect	onMounted, смотреть, смотретьЭффект, onUnmounted
Подобные части разобраны выше, и useEffect сравнивается с watchEffect.

function() {
    useEffect(()=>{
        // 当demo发生变化时触发
        console.log(demo)
    },[demo])
    
    return (
        <div>react</div>
    )
}

import {reactive, watchEffect} from 'vue'
export default {
    setup() { 
          const state = reactive({ count: 0, name: 'zs' })
          watchEffect(() => {
            console.log(state.count)
            console.log(state.name)
          })
          return {
            state
          }
    }
}

Благодаря реактивному механизму внутри исходного кода во время инициализации новый APIwatchEffectВам даже не нужно отслеживать, кто изменился, чтобы вызвать побочные эффекты, потому что весь процесс мониторингаvue3в исходном кодеProxyЗаконченный.

Мало того, vue3 представил синтаксис, более близкий к нативному js,как! ! ! ! ! !

<script setup>
import { reactive, ref} from "vue";

// 渐进式更新：ref api
let val = ref("");
let todos = reactive([
  {
    id: 0,
    title: "吃饭",
    done: false,
  },
  {
    id: 1,
    title: "睡觉",
    done: false,
  },
]);

function addTodo() {
  todos.push({
    id: todos.length,
    title: val.value,
    done: false,
  });
  val.value = "";
}
</script>

На самом деле здесь студенты стека технологий vue должны тайно гордиться, и они говорят vue yes! К сожалению, у такой хорошей библиотеки тоже есть проблемы.vue2ОтзывчивыйObject.definePropertyЭто клише — не иметь возможности отслеживать изменения значений свойств, добавленных после индексов массива и объектов.vue3УсыновленныйProxy ApiРешая эти проблемы, он также приносит новые проблемы, такие какreactiveМогут быть переданы только объекты (можно использовать простые и сложные значения react useState), а также официально рекомендованныйrefно нужно пройти .valueЧтобы получить ценность, это действительно заставляет сообщество жарить горшок, для этогоvueКоманда была вынуждена стартовать под давлениемtoRefs(Заинтересованные студенты могут узнать об этом. Ранее я обсуждал это с Ибао в автономном режиме).

5. Обработка событий (@Click vs onClick)

vue

vueиспользуется вv-on(сокращенно@) контроль командDOMсобытие и запустить несколькоJavaScriptкод. обычно используетсяv-onПолучает имя метода для вызова.

<div  @click="helloShanghai">welcome</div>
<div  @click="helloShanghai('hello')">welcome</div>

Чтобы получить доступ к собственным событиям DOM, вы можете явно передать $event методу

<div  @click="helloShanghai('hello', $event)">welcome</div>

общий элементaddEventListener, компонент$on

react

ReactОбработка событий элемента иDOMЭлементы похожи, но с небольшой синтаксической разницей:

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

<div onClick={this.handleClick}>Click me</div>
<div onClick={this.handleClick.bind(this)}>Click me</div>
<div onClick={()=>{this.handleClick()}）}>Click me</div>
<div onClick={this.handleClick()}>Click me</div><!-- 错误写法>

react16Смонтируйте синтетические события вdocumentвыше, после версии 17rootкорневой элемент.

6. Компонентизация

VueПоощряйте писать приблизительные соглашенияHTMLшаблон. Написано очень близко к стандарту HTMLэлементы, еще несколько атрибутов.ReactРекомендуется, чтобы все ваши шаблоны были общимиJavaScriptРасширение синтаксиса -JSXнаписать.

7. Инструменты сборки

React ==> Create React APP Vue ==> vue-cli

8. Другие

Конечно, есть и другие сравнения, такие какvueслот сreactизprops.childrenи Т. Д.

Действительно истощен. . .

4. Мое мнение

1,reactВ мидл- и бэкенд-проектах сложнее иметь дело с повторным использованием сложной бизнес-логики или компонентов.vueЭто элегантно и узнаваемо другими, но такая элегантность имеет свою цену.Это требует общей технической силы команды, а дизайн и способности лидера должны быть лучше, поэтому стоимость разработки выше. 2,vueОн известен своим дружественным и простым в использовании методом написания.Прогрессивная структура, более дружественный API и более дружественный дизайн значительно снижают стоимость разработки и значительно повышают эффективность. 3. С другой стороны,vueПотому что есть много хороших常用изapi(Синтаксический сахар), который регулирует разработчиков и в определенной степени ограничивает их дивергентное мышление; иreactпотому что меньше常用``apiПовысьте творческий потенциал разработчиков, но также и потому, что каждыйreactпара разработчиковreactРазное понимание приводит к разным стилям кода. 4.vueиreactВ длительном процессе разработки я становился все более и более зрелым.После тщательного рассмотрения я чувствую, что и то, и другое очень осуществимо на мобильных терминалах или в крупномасштабных мидл- и бэк-офисах.На самом деле, нет хорошей или плохой структуры.Что мы должны думать о том, какой технологический стек хочет использовать команда, и насколько она нравится и хороша в каком технологическом стеке.

Как вы все думаете?

Вспоминая все прошедшие события на фронте тех лет, невольно хочется спеть стихотворение.

Пять, прочитайте стихотворение

Технологические изменения, взлеты и падения один за другим

Мы были свидетелями лучших усилий jquery,

Мы стали свидетелями совершенства реакции,

Мы стали свидетелями первого появления vue,

Мы стали свидетелями силы nodejs.

Земля широка, а небо длинно,

Мы можем только кататься на ветру и волнах,

Несмотря на постоянно меняющиеся технологии,

Мы также можем покататься на поле боя.

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

Шесть, вся семейная бочка

react	vue
реакция-маршрутизатор, реакция-маршрутизатор-dom	vue-router
redux	vuex
antd	элементUI, iview
Create React APP	вью-кли, вите
next.js	nuxt
реактивный родной, таро	уни-приложение, weex
antd-mobile	мятный интерфейс, вукс, воник, кубический интерфейс