Внешний фреймворк использует vue или react? Наглядно сравните различия

внешний интерфейс
Внешний фреймворк использует vue или react? Наглядно сравните различия

vue или реагировать? Это вопрос.

предисловие

За последние два года front-end технологии появлялись одна за другой.В настоящее время на рынке существует множество фреймворков для разработки front-end персонала.В мгновение ока прошло более половины из 19 лет. Статистика данных реакции и vue показана на следующем рисунке:

Когда я недавно учился использовать фреймворк, я разработал два мобильных продукта, используя vue и react соответственно. У меня есть некоторое представление о кривой обучения этих двух фреймворков. Эти два сейчас относительно популярны js-фреймворки, и они оба используют. все еще большая разница между методом и сложностью обучения Вот краткое изложение разницы между ними.

В основном это начинается со следующих аспектов:

  • Рождение кадра
  • дизайн-мышление
  • писать грамматику
  • Инструменты для строительства строительных лесов
  • привязка данных
  • виртуальный DOM
  • инструкция
  • оптимизация производительности
  • нативный рендеринг нативный
  • рендеринг сервера ssr
  • функция жизненного цикла
  • уничтожить компонент
  • Инструмент управления набором состояний

рождение

vue

Vue был разработан You Yuxi и поддерживается независимой командой.Сейчас большинство подпроектов передано членам команды, а основная библиотека Vue по-прежнему в основном поддерживается самим You Yuxi. В последние годы Vue привлекает к себе особое внимание: три года назад angularJS долгое время доминировал на рынке фронтенд-JS-фреймворков, а потом родился фреймворк react, так как в нем есть фича виртуального DOM, которая давит angularJS с точки зрения производительность.В это время тихо вышел Vue1.0.Его элегантность и легкость тоже привлекла некоторых пользователей и начала привлекать внимание.В середине 2016 вышел Vue2.0,который чуть-чуть превзошел React по производительности и стоимости, и в огне был бардак., В это время команда разработчиков angular также разработала версию angular 2.0 и сменила название на angular, которое вобрало в себя преимущества react и vue, и характеристики самого angular, что также привлекло многих пользователей , Теперь он был повторен до 8.0. Дружеское напоминание, обратите внимание на время рождения Vue.Если у вас есть маленький партнер на собеседовании, и вас спросят, когда вы начали контактировать и использовать Vue, если вы ответите, что он используется в течение 5 или 6 лет, сцена будет очень неловкой.

react

Сначала, когда Facebook создавал instagram (обмен изображениями), поскольку он включал в себя вещь, называемую потоком данных, чтобы обрабатывать поток данных и учитывать проблемы с производительностью, Facebook начал предлагать на рынке множество интерфейсных MVC-фреймворков. , но мне это не понравилось, поэтому Facebook посчитал, что лучше всего разработать его самостоятельно, поэтому они решили отложить в сторону многие так называемые «лучшие практики» и переосмыслить способ построения внешнего интерфейса, и они разработали его сами.Я получил набор, и, конечно же, творчество Даниэля по-прежнему очень мощно.

React возник как внутренний проект Facebook.Поскольку компания была недовольна всеми фреймворками JavaScript MVC на рынке, она решила написать один для создания веб-сайта Instagram. После его создания я обнаружил, что этот набор вещей работает очень хорошо, и в мае 2013 года он был открыт.

дизайн-мышление

vue

На официальном сайте Vue говорится, что это прогрессивный фреймворк с инкрементной разработкой снизу вверх. Здесь необходимо уточнить понятие, что такое прогрессивный фреймворк. На основе декларативного рендеринга (механизм шаблонов представлений) мы можем построить полную структуру, добавив систему компонентов (components), маршрутизацию на стороне клиента (vue-router) и крупномасштабное управление состоянием (vuex). С точки зрения дизайна Vue может охватывать все эти вещи, но вам не нужно использовать их все, как только вы начнете, потому что в этом нет необходимости. Это необязательно как с точки зрения обучения, так и с практической точки зрения. Система декларативного рендеринга и композиции включена в основную библиотеку Vue, а также существуют специальные решения для маршрутизации на стороне клиента, управления состоянием и инструментов построения. Эти решения независимы друг от друга, и вы можете выбрать любые другие компоненты исходя из ядра, не все из них нужно интегрировать. Можно видеть, что так называемый «прогрессивный» на самом деле является способом использования Vue, а также отражает концепцию дизайна Vue.

react

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

писать грамматику

vue

Рекомендуемая практика Vue — это однофайловый формат компонента webpack+vue-loader, Vue сохраняет отдельный метод написания html, css и js, так что существующие фронтенд-разработчики могут сохранять свои первоначальные привычки при разработке, что ближе к обычно используемым.В методе веб-разработки шаблон обычный html, привязка данных использует стиль усов, а стиль напрямую использует css. Тег

Шаблоны и JSX — вещи со своими плюсами и минусами. Шаблоны ближе к нашему HTML, позволяя нам более интуитивно думать о семантической структуре и лучше сочетать написание CSS.

В то же время vue также поддерживает синтаксис JSX, потому что это настоящий JavaScript, у него есть все возможности самого языка, он может делать сложные логические суждения и выборочно возвращать структуру DOM, которую нужно вернуть. сделать.

react

Разработчики, которые использовали React, могут знать, что у React нет шаблона, это просто функция рендеринга, и она возвращает виртуальное дерево DOM посередине.Рекомендуемый метод React — JSX + встроенный стиль, то есть писать все HTML и CSS в JavaScript, т.е. «все в js». JSX на самом деле представляет собой набор синтаксического сахара, который использует синтаксис XML, чтобы упростить описание древовидных структур. В React все функции рендеринга компонентов основаны на JSX. Вы можете написать XML-подобный синтаксис в render(), и в конечном итоге он будет скомпилирован в собственный JavaScript. Не только HTML может быть выражен в JSX, но и текущая тенденция заключается в том, чтобы включать CSS в JavaScript для обработки. JSX — это набор дополнительного синтаксиса, основанного на JS, и обучение его использованию требует определенных затрат.

инструменты для сборки

vue

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

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

react

React также предоставляет create-react-app в этом отношении, но все же есть некоторые ограничения:

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

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

привязка данных

vue

Vue — это инфраструктура mvvm, которая реализует двустороннюю привязку данных: при изменении представления обновляется слой модели, а при изменении слоя модели обновляется слой представления. Во Vue используется технология двусторонней привязки, то есть изменения в View могут изменять Model в реальном времени, а изменения в Model также могут обновляться в View в реальном времени.

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

react

React — это односторонний поток данных, свойства в реакции не могут быть изменены, а состояние может быть изменено. Компоненты в реакции не могут напрямую изменять состояние компонента через this.state. Состояние, установленное само по себе, может быть изменено с помощью setState. В setState передача объекта изменит часть пары ключ-значение в состоянии компонента. Вы также можете передать функцию. Эта функция обратного вызова должна быть объектной функцией, как указано выше, которая может принимать prevState и реквизит. Вызывая this.setState для обновления this.state, вы не можете напрямую манипулировать this.state, пожалуйста, относитесь к нему как к неизменяемому.
Вызовите setState для обновления this.state, это не вступит в силу немедленно, это асинхронно. Так что не думайте, что вы можете получить последнее значение сразу после вызова setState. Несколько последовательно выполняемых setStates не выполняются синхронно друг за другом, они будут добавляться в асинхронную очередь, а затем выполняться вместе в конце, то есть пакетная обработка.

setState является асинхронным, поэтому предыдущий контент все еще может быть получен при получении dom, поэтому нам нужно получить обновленный новый контент во втором параметре (функция обратного вызова) setState.

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

vue

Процесс реализации алгоритма diff в vue

  1. Построение дерева виртуального дома в памяти
  2. Преобразование виртуального дерева DOM в памяти в реальную структуру DOM.
  3. Когда данные изменяются, объедините предыдущее дерево виртуального дома с новыми данными, чтобы создать новое дерево виртуального дома.
  4. Сравните сгенерированное виртуальное дерево DOM на этот раз с последним виртуальным деревом DOM (сравнивается алгоритм сравнения), чтобы обновить DOM, который нужно только заменить, а не перерисовывать все. В алгоритме Diff сравниваются только узлы двух деревьев DOM до и после, без обхода глубины.
  5. Разница будет перерисована

react

Процесс реализации алгоритма diff в реакции

  1. Структура DOM изменилась ----- непосредственно выгрузить и воссоздать
  2. Структура DOM та же — она не будет удалена, но измененное содержимое будет обновлено.
  3. Все дочерние узлы одного уровня.Их можно отличить по ключу-----Следуйте одновременно двум пунктам 1.2
    (На самом деле наличие этого ключа повлияет только на сложность алгоритма сравнения. Другими словами, если вы не добавите ключ, алгоритм сравнения будет насильственно обновляться в соответствии с одной или двумя стратегиями, но если вы добавите ключ , diff Алгоритм введет некоторые дополнительные операции)

React будет обновлять узлы один за другим и переходить к целевому узлу. И, наконец, вставка нового узла включает в себя множество операций DOM. Diff — это всего три операции: перемещение, удаление и добавление.Если каждому узлу присвоен уникальный идентификатор (ключ), то React предпочитает перемещаться, чтобы найти правильную позицию для вставки новых узлов.

Vue отслеживает зависимости каждого компонента без повторного рендеринга всего дерева компонентов. Для React каждый раз, когда состояние приложения изменяется, все компоненты будут перерисовываться, поэтому в реакции на управление требуется метод функции жизненного цикла shouldComponentUpdate.

инструкция

Директивы – это те, которые

Особенностью префикса v- является ответственность директивы реагировать на DOM с соответствующими эффектами при изменении значения выражения.

vue

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

react

Поскольку в реакции нет инструкции v-for, вам нужно использовать метод map() для рендеринга представления при циклическом рендеринге и помещать подходящие элементы в новый массив для возврата.

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

vue

Каждый компонент в vue автоматически реализуется внутри

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

react

Запускается при изменении реквизита или состояния

Функция жизненного цикла shouldComponentUpdate используется для управления повторным рендерингом компонента.Если она возвращает значение true, функция рендеринга выполняется для обновления компонента; если она возвращает false, процесс повторного рендеринга не будет запущен.

Иногда мы хотим, чтобы перед обновлением его сравнивали с предыдущим состоянием, в это время нам нужно переписать

shouldComponentUpdate, чтобы избежать ненужных операций с домом, сравните текущий реквизит или состояние с обновленным nextProps или nextState, когда он возвращает true, компонент обновляется; если он возвращает false, он не будет обновляться, сохраняя производительность.

shouldComponentUpdate(nextProps, nextState) {
    if (this.props.a !== nextProps.a) {
        return true;
    }
    if (this.state.b !== nextState.b) {
        return true;
    }
    return false;
}

Мы также можем создать компонент React, который наследует React.PureComponent, который поставляется с

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

classTestextendsReact.PureComponent{constructor(props){super(props);}render(){return<div>hello...{this.props.a}</div>}}

Поскольку React.PureComponent выполняет поверхностное сравнение, то есть сравнивает только то, совпадает ли значение исходного объекта.Когда наши свойства или состояние являются ссылочным типом, таким как массив или объект, мы изменяем его значение, потому что ссылка на данные Указатель не изменился, поэтому компонент также не выполняет повторную визуализацию. В это время нам нужно выполнить глубокую копию, создать новый объект или массив и скопировать «значения» (все элементы массива) атрибутов исходного объекта, которые являются «значениями», а не просто «ссылками». адреса». Мы можем использовать метод slice():

ew_state.todos = new_state.todos.slice();

Или введите библиотеку Immutable, чтобы данные не были переменными.

нативный рендеринг нативный

Native относится к использованию собственного API для разработки приложений, таких как ios с использованием языка OC, android с использованием java.

vue

Vue и Weex официально сотрудничают. Weex — это кроссплатформенная среда разработки пользовательского интерфейса, инициированная Alibaba. Его идея состоит в том, чтобы написать один набор кода для нескольких платформ. Weex позволяет использовать синтаксис vue для разработки не только на стороне браузера, но и в браузере Компоненты, которые также можно использовать для разработки нативных приложений для iOS и Android. То есть вам нужно написать только один код для запуска в Интернете, iOS и Android.

С Weex относительно легко начать работу, его можно использовать после установки vue-cli, а порог обучения низкий, но его сообщество все еще находится в стадии роста.Нативное сообщество React очень зрелое и активное, и есть очень богатые компоненты для расширения.

react

React Native – это кроссплатформенный UI-фреймворк, исходный код которого был открыт Facebook на конференции разработчиков F8 в марте 2015 года. Для его использования необходимо написать два разных кода для iOS и Android. Использование React Native требует установки и настройки многих зависимых инструментов в соответствии с документацией, которая является относительно хлопотным. Идея weex состоит в том, чтобы писать только один набор кода для нескольких платформ, тогда как идея react-native заключается в том, что несколько платформ могут писать несколько наборов кода, но они используют один и тот же набор языковых фреймворков.
Цель weex — сгладить различия между платформами, тем самым упростив разработку приложений. React-native, с другой стороны, распознает различия между различными платформами и ищет следующее лучшее, абстрагирует платформу на уровне языка и фреймворка и решает проблему мультиплатформенной разработки с методологической точки зрения.

рендеринг сервера ssr

Ядром рендеринга на стороне сервера является облегчение SEO-оптимизации.Бэкенд сначала вызывает базу данных, а после получения данных собирает данные и элементы страницы в полную HTML-страницу, а затем возвращает ее непосредственно в браузер для пользователей. просматривать.

vue

25 октября 2016 года команда zeit.co выпустила Next.js, платформу приложений для React, отображаемую на сервере. Несколько часов спустя, как и в случае с Next.js, появилась среда приложения для рендеринга на стороне сервера, основанная на Vue.js, которую мы назвали: Nuxt.js.

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

  • На основе Vue.js
  • Автоматическое наслоение кода
  • рендеринг на стороне сервера
  • Мощная функция маршрутизации, поддержка асинхронных данных
  • подача статических файлов
  • Поддержка синтаксиса ES2015+
  • Объединяйте и минимизируйте JS и CSS
  • Управление тегами заголовков HTML
  • Локальная разработка поддерживает горячую загрузку
  • Интеграция ESLint
  • Поддерживает препроцессоры различных стилей: SASS, LESS, Stylus и др.
  • Поддержка HTTP/2 push

react

Далее идет платформа React, которая позволяет создавать SSR и статические веб-приложения с использованием React.

  • Рендеринг сервера, получение данных очень просто
  • Нет необходимости изучать новый фреймворк, поддерживается статический экспорт.
  • Поддержка библиотеки CSS-in-JS
  • Автоматическое разделение кода для ускорения загрузки страницы без загрузки лишнего кода
  • Среда разработки на основе Webpack, поддерживающая горячее обновление модулей (HMR)
  • Поддержка настраиваемого сервера конфигурации Babel и Webpack, маршрутизации и следующих плагинов.
  • Может быть развернут на любой платформе, которая может запускать Node.
  • Встроенная обработка поисковой оптимизации (SEO) на странице
  • В производственных средах упакованные файлы имеют меньший размер и работают быстрее.

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

vue

[Стадия инициализации (4)]

(1) перед созданием

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

(2) создано

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

(3) перед креплением

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

(4) установленный

Это последняя функция-ловушка на этапе инициализации жизненного цикла.Данные смонтированы, и можно также получить настоящий DOM.

【Во время работы (2)】

(5) перед обновлением

Работающая функция ловушки beforeUpdate не будет выполняться по умолчанию и будет выполняться только при изменении данных. Когда данные обновляются, сначала вызывается beforeUpdate, а после того, как обновление данных приводит к отображению представления, выполняется update. При запуске данные, полученные функцией ловушки beforeUpdate, по-прежнему являются данными до обновления (содержимое DOM до получения обновления).В этой функции ловушки вы не должны изменять данные, что вызовет бесконечный цикл.

(6) обновлено

Данные, полученные этой функцией ловушки, представляют собой обновленные данные, генерирует новую виртуальную модель DOM, сравнивает ее с предыдущей структурой виртуальной модели DOM, сравнивает разницу (алгоритм сравнения) и затем отображает реальную модель модели DOM. -render, В обновленной функции хука можно получить последний настоящий DOM.

[Этап разрушения (2)]

(7) перед уничтожением

При переключении маршрутов компонент будет уничтожен, а перед уничтожением выполняется beforeDestroy. В этой функции-ловушке мы можем выполнять некоторые последующие операции, такие как очистка глобального таймера (события на этапе инициализации связаны созданной функцией-ловушкой) и очистка привязок событий.

(8) уничтожено

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

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

react

[Стадия инициализации (5)]:

(1) getDefaultProps: после создания экземпляра компонента будет выполняться функция ловушки компонента getDefaultProps.

Цель этой функции хука — смонтировать свойства по умолчанию для экземпляра компонента.

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

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

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

(2) getInitialState: монтирует начальное состояние для экземпляра, и оно будет выполняться каждый раз при его создании, то есть каждый экземпляр компонента имеет свое собственное независимое состояние.

(3) componentWillMount: выполнить componentWillMount, что эквивалентно created+beforeMount в Vue. Это последний шанс изменить данные перед рендерингом. Если изменить здесь, это не вызовет повторного выполнения рендеринга.

(4) визуализация: визуализация дома

Метод render() должен быть чистой функцией, его нельзя изменять.

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

shouldComponentUpdate() возвращает

ложный,

render() не будет вызываться.

(5) componentDidMount: эквивалентно монтированию в Vue, в основном используется для работы с реальным домом.

【Этап в работе (5)】

Когда компонент смонтирован на странице, он входит в стадию выполнения.Здесь есть 5 хуков, но эти 5 функций будут выполняться только при отправке и изменении данных (атрибут, состояние).

(1) componentWillReceiveProps (nextProps, nextState)

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

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

(2) следующим будет выполнено shouldComponentUpdate(nextProps, nextState).Функция этой функции: при изменении свойства или состояния она контролирует, нужно ли обновлять компонент для повышения производительности.Если он возвращает true, он будет обновлен. В противном случае он не будет обновляться и по умолчанию вернет true.

Получите nextProp и nextState, а затем сравните и решите, следует ли обновлять новое состояние свойства и исходное состояние свойства.

если

shouldComponentUpdate() возвращает

ложный,

componentWillUpdate,

визуализировать и

componentDidUpdate не будет вызываться.

(3) componentWillUpdate, здесь компонент будет перерендерен в ближайшее время, сделайте больше подготовительной работы, не изменяйте здесь состояние, иначе это будет бесконечный цикл, который эквивалентен beforeUpdate в Vue

(4) рендеринг, повторный рендеринг

(5) componentDidUpdate, здесь родилась новая структура dom, которая эквивалентна обновлению в Vue.

【Этап разрушения】

За момент до уничтожения компонента сработает componentWillUnmount и борьба перед смертью

Он эквивалентен beforeDestroy в Vue, поэтому обычно выполняет некоторые последствия, такие как аннулирование таймера, отмена сетевых запросов или очистка памяти.

Любые слушатели, созданные в componentDidMount.

уничтожить компонент

vue

Когда vue вызывает метод $destroy, он выполняет функцию жизненного цикла beforeDestroy, а затем компонент уничтожается.В это время DOM-структура компонента все еще существует в структуре страницы, то есть если вы хотите иметь дело с остаточной структурой DOM, она должна быть уничтожена. Обрабатывается в функциях жизненного цикла.

react

После того, как реакция выполняет componentWillUnmount, события, данные и dom обрабатываются, то есть когда родительский компонент переходит от рендеринга дочернего компонента к тому, чтобы не рендерить дочерний компонент, дочерний компонент эквивалентен уничтожению, поэтому никакие другие компоненты вообще нужны функции хука. Когда React уничтожает компонент, он также удалит dom-структуру компонента, а vue — нет.Когда метод destroy вызывается для уничтожения компонента, dom-структура компонента все еще существует на странице, а this.$ Структура компонента destory все еще существует.Просто удалил прослушиватель событий, поэтому vue имеет уничтожение, но в реакции нет componentDidUnmount.

Инструмент управления набором состояний

vue

Vuex — это инструмент управления набором состояний, специально созданный для Vue. И Vue, и React разрабатываются на основе компонентов. Проект содержит много компонентов, и компоненты будут иметь вложенные компоненты, чтобы данные в компоненте могли быть доступны другим компонентам. Затем вам нужно использовать Vuex.

процесс vuex

  1. Смонтируйте состояние, которое необходимо разделить, в состояние: this.$store.state для вызова

Создайте хранилище, смонтируйте состояние в состояние, настройте хранилище в корневом экземпляре, а затем мы можем использовать this.$store.state в компоненте для использования данных, управляемых в состоянии, но при таком использовании, когда данные состояния изменяются, компонент vue не будет повторно отображаться, поэтому нам нужно использовать его, вычислив вычисляемое свойство, но когда мы используем несколько данных, этот метод записи более проблематичен, vuex предоставляет вспомогательную функцию mapState, чтобы помочь нам получить и использовать компонент в компоненте.Использовать состояние, сохраненное в магазине vuex.

  1. Мы создаем состояние через геттеры: вызываем через this.$store.getters

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

  1. Используйте мутации для изменения состояния: вызовите this.$store.commit

Мы не можем изменить состояние непосредственно в компоненте, но для его изменения нам необходимо использовать мутации.Мутации также являются чистым объектом, который содержит множество методов для изменения состояния.Формальные параметры этих методов получают состояние и изменяют его в теле функции.В это время компонент Используемые данные также изменится, что сделает его отзывчивым. Vuex предоставляет метод mapMutations, который помогает нам вызвать метод мутации в компоненте.

  1. Используйте действия для обработки асинхронных операций: this.$store.dispatch для вызова

Действия аналогичны мутациям, разница в том, что Действия вызывают мутации, а не изменяют состояние напрямую. Действия могут содержать произвольные асинхронные операции. То есть, если есть такое требование: после обработки асинхронной операции для изменения состояния мы должны сначала вызвать действия в компоненте для выполнения асинхронного действия, а затем действия вызывают мутации для изменения данных. В компоненте метод действий вызывается через метод this.$store.dispatch, и, конечно же, для помощи можно использовать mapMutations.

react

В 2015 году появился Redux, сочетающий Flux с функциональным программированием, и за короткое время он стал самой популярной фронтенд-архитектурой. В основном это решает проблему связи между компонентами в реакции. Рекомендуется поместить данные в редукцию для управления, цель состоит в том, чтобы облегчить унификацию данных и легкое управление. Как только проблема возникает в проекте, проблемная точка может быть непосредственно обнаружена. Когда компонент расширяется, последующая деятельность связана с проблемой доставки. Первоначально компоненты используют свои собственные данные, но позже для обычных компонентов вам нужно подумать о том, как передавать значения, и в редуксе может храниться не менее 5 ГБ данных.

Процесс редукции

  1. Создать магазин: возьмите createStore из инструмента редукции, чтобы создать магазин.
  2. Создайте редюсер и передайте его в createStore, чтобы помочь в создании хранилища. Редуктор - это чистая функция, которая получает текущее состояние и действие, возвращает состояние, что возвращается и каково состояние хранилища.Следует отметить, что текущим состоянием нельзя управлять напрямую, но новое состояние необходимо быть возвращены. Чтобы создать состояние по умолчанию для хранилища, нужно создать значение по умолчанию для параметра в редюсере.
  3. Компонент использует состояние в хранилище, вызывая метод store.getState, и монтирует его в свое собственное состояние.
  4. Компонент генерирует пользовательскую операцию, вызывает метод actionCreator для создания действия и использует метод store.dispatch для передачи его редюсеру.
  5. После того как редьюсер оценивает показательную информацию о действии, он обрабатывает новое состояние, а затем возвращает новое состояние.В это время данные хранилища изменятся, а возвращаемое редюсером состояние можно получить с помощью store.getState .
  6. В компоненте мы можем использовать метод store.subscribe для подписки на изменение данных, то есть мы можем передать функцию, при изменении данных будет выполняться переданная функция, и в этой функции компонент может получить последний статус.

резюме

Суть Vue и React заключается в том, чтобы сосредоточиться на легком уровне представления. Хотя он решает только небольшую проблему, их огромная экосистема предоставляет множество вспомогательных инструментов. В начале она не предоставит вам полный набор настроек. Решение упакует для вас все функции одновременно. Оно предоставит вам только некоторые простые основные функции. Когда вам нужно сделать более сложное приложение, вы можете добавить соответствующие инструменты. Например, маршрутизация необходима только при создании одностраничного приложения; крупномасштабное решение для управления состоянием может потребоваться при создании довольно большого приложения, которое включает многокомпонентное совместное использование состояния и совместную работу нескольких разработчиков.

Существование фреймворка должно помочь нам справляться с различными сложностями проекта.Когда мы сталкиваемся с большим и сложным проектом разработки, использование слишком простых инструментов значительно снижает производительность разработчиков и влияет на эффективность работы.Рождение фреймворка — это Извлечение некоторых повторяющихся и проверенные шаблоны в этих проектах, абстрагируйте их в разработанный для вас пакет API и помогите нам решать задачи различной сложности. Так что в процессе разработки выбор подходящего фреймворка позволит сделать больше с меньшими затратами. Однако сам фреймворк также имеет сложность, и некоторые фреймворки заставляют людей не знать, с чего начать. Когда вы получаете несложное требование, но используете очень сложную структуру, это эквивалентно использованию ножа, чтобы убить курицу.Вы столкнетесь с побочными эффектами, вызванными сложностью инструмента, вы не только потеряете преимущества, которые дает сам инструмент, это также увеличит различные проблемы, такие как затраты на обучение, начальные затраты и реальную эффективность разработки.

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

пасхальные яйца

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

Категории