Как я перешел с Vueer на React в 2020 году

Vue.js
Как я перешел с Vueer на React в 2020 году

предисловие

Всем привет, меня зовут wangly19. акцент наVueПередняя часть новая. После Национального дня мы встретимся с вами по расписанию. Опытный金九银十и十一长假В будущем я также начну усердно работать над написанием статей, на этот раз в основном для того, чтобы поделиться тем, как я быстро переходил кReactстек технологий. Если вы читаете статью, вы учитесьReactИли также转换技术栈, то эта статья точно сможет вдохновить вас и помочь.

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

Зачем переходить на React

зачем менятьReactНу, потому что новая компания принадлежитReactстек технологий. включаютTaro,Umiи ряд решений. Хотя он был заменен в сторону стека технологий, для Сяо Вана, которому необходимо адаптироваться к новому стеку технологий в любое время и продолжать учиться, как правило, трудно начать работу и получить навыки в использовании.Vueв то время как для некоторых组件化и工程化Проекты имеют свое понимание. Поэтому после двух-трех дней учебы,简单的模块Это все еще очень просто мириться. Поэтому в этом9月, я сталReacter. Но в то же время я все еще активно учусьVue3, кажется, не так уж и сложно быть фронтендом с двойным открытием.

Разница между Vue и React

Существенная разница

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

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

Различия в отображении данных

В способе рендеринга данных,

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

ReactявляетсяsetStateОбновите данные вручную, черезsetStateвозобновитьstateзначение для достиженияrenderЭффект просмотра, на который разработчику нужно обращать внимание только тогда, когдаstateизменения и вновьrender.

Различия в API

в моем использованииReactс тех пор я всегда чувствовалVueизtemplateБолее элегантный в обращении, чемReactизjsx, не синтаксически выше, а исходя из основ прокси данных, вClass Componentв центреrenderбудет большое количествоporps, stateВ конце концов, деконструкция — это болевая точка, если вам нужноthisНаписание всего блока кода становится очень грязным, поэтомуVueправильноtemplateвам не нужно проходитьthis.data.xxxоказыватьoptions apiи так далее.

Во-вторых, я всегда чувствуюVueЖизненный цикл лучше изучен, в то время какReactЖизненный цикл действительно немного запутан, и некоторые хуки в новой версии заброшены и заменены, что приводит к техническим различиям, и многие статьи могут остаться в предыдущей версии.APIВерсия.

Но вVueиReactновыйAPIэволюционировали вHooksрежиме, поэтому эти вопросы кажутся менее важными.2020лет, если вы все еще изучаете интерфейс,HookМысль — один из необходимых путей обучения.

Начинаются строительные леса

Почему первые строительные леса у молодежи могут быть толькоcreate-react-app? Как мы все знаем, официальные скаффолдинги очень сложны в использовании, не только хлопотно настроить, но и некоторыеpluginВсе должны интегрироваться сами по себе, что можно назвать первым шагом для новичков, чтобы убедить их бросить курить.我不学了，我要用VueCli. Итак, если этоVueРазработчик просто взял на себяReact,Я рекомендуюumi, в видеReactВажная команда по открытому исходному коду, команда Ant далаReactВнес много инструментов с открытым исходным кодом, таких какant design, dva, umiЭто значительно облегчает интеграцию разработки. С текущей точки зрения, в конце концов, строительные леса компании не должны об этом беспокоиться.架构组Может потребоваться салфеткиKPI, так что теперь задача научитьсяReactсебя, вместо того, чтобы стоять на коленях прямо на подмостках.

маршрутизация, первый шаг

С момента использованияumi, затем вернуться к этомуvueCliВек кончился, простойdemo, чтобы вернуть знакомое чувство:

export default {
  routes: [
    { path: '/login', component: 'login' },
    {
      path: '/',
      component: '@/layouts/index',
      routes: [
        { path: '/list', component: 'list' },
        { path: '/admin', component: 'admin' },
      ],
    }, 
  ],
}

Вы хорошо знаете друг друга, да иvue-routerЗнакомый вкус, точно такой же. КромеchildrenзаменяетсяroutesКроме того, в основномreact-routerнастроен. Итак, я хочу крючки для охраны маршрута, есть ли такие?

  • umi: Я заранее знал, о чем вы, ребята, думали.

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

// 修改标题
export function onRouteChange({ matchedRoutes }) {
  if (matchedRoutes.length) {
    document.title = matchedRoutes[matchedRoutes.length - 1].route.title || '';
  }
}

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

  • umi: У меня тоже калейдоскоп пишущего колеса глаз.

Видно, что черезpatchRoutesправильноroutesТакже возможно выполнять табличные операцииaddRoutesтот же эффект.

export function patchRoutes({ routes }) {
  routes.unshift({
    path: '/test',
    exact: true,
    component: xxxxx,
  });
}

При выполнении этих условий я немедленноVueПроверка разрешения на маршрутизациюdemoВтянул, обнаружил, что можно безболезненно заменить, но место написания другое, а изменения кода почти такие же, моментально学习动力+1000У тебя есть.

государственное управление

первыйReduxЧерез день из первых рукDvaСказочная гонка. Государственное управление всегда былоReactГоловная боль, так как есть слишком много решений, таких какredux全家桶,MobxИ так далее, библиотеки зависимостей, которые широко используются сегодня, несомненно, дороги в изучении, и они также находятся в открытом доступе от муравьиных боссов.dvaИнтеграция значительно снижает давление конфигурации на разработчика без необходимостиreduxиsagaНекоторое наслоение конфигурации и структуры. А с точки зрения стоимости использования, если вы использовалиvuex, что в основном представляет собой бесшовное состояние подключения.

через один из следующихDva ModelВидно, что он очень похож на Vuex.Modules. Для использованияVuexДля опытного меня, начнитеDvaНа самом деле просто чашка кофе и послеобеденный чай.

export default {
  // 同样的命名空间
  namespace: 'todo',
  state: {
    // 类似Vuex State
    list: []
  },
  reducers: {
    // 类似Vuex Mutations
    save(state, { payload: { list } }) {
      return { ...state, list }
    }
  },
  effects: {
    *queryUserInfo({ payload: value }, { call, put, select }) {
      // 对比Vuex Actions
    }
  },
  subscriptions: {
    setup({ dispatch, history }) {
      // 监听路由的变化，请求页面数据
    }
  }
}

Компоненты высшего порядка?

существуетReact, есть очень интересная штука под названиемHOC, его можно понимать как вложенный слой, во Vue мы можем использовать логику повторного использованияMixinСотрудничайте с компонентами vue, чтобы выполнить некоторую инкапсуляцию, чтобы обеспечить полиморфизм компонента компонента, то же самое вReactтакже можно пройти вHOCвыполнить логическое多态重载, во многих случаях нам нужно только преобразовать соответствующийrenderвходящий компонент. Это достигается за счет обмена среднего уровня. Тогда мы можем положитьHOCпонимается как замыкание. Передавая компонент и возвращая компонент с упакованными параметрами, вам нужно только обратить внимание на входящий компонент, обработать данные внутри, а затем передать их входящему компоненту. хочу углубитьсяHOCВсе еще нужно больше практики, больше обучения и понимания идеи функционального программирования.

const ComponentWith = listComponent => listComponent

слот

существуетVueмы можем пройтиslotПередайте шаблон компонента компоненту и визуализируйте его. иReactОчевидно, что нет понятия слотов, но на самом деле, пропишите ли вы его в компонентеJSX DOMбудет передано вPropsизchildrenПосередине то как рендерить не надо мне говорить. это похожеVueРеализация обычного слота выполнена.

Но часто мы можем делать разные вещи из-за разных слотов, например, у меня естьfooterСлот используется для изменения содержимого в нижней части модального окна,headerИспользуется для изменения содержимого вверху. Затем мы можем сделать это, передав объект具名插槽имитация сценария. То же самое также передаст егоPropsиди в. Это очень интересно?

<Model>
{{
	header: <div>header slot</div>,
	footer: <div>footer slot</div>
}}
</Model>

CSS-решение

Это самая головная боль для меня на первый взгляд.Прости красавчик,не могу есть.cssModuleЭта миска мягкого риса, если бы ты написалVue, то вы знаете, что при различении стилей компонентов можноstyleобъявить один на этикеткеscopedчтобы изолировать аннотации как стили компонентов. В финальном пакете стили фактически добавляются однимhashОднако уникальное значение, когда я пишуReactНет решения, подобного этому подходу. до сих пор используется в большинстве случаевcssModuleпланирую продолжить. Хотя кажется, что достигнута изоляция стилей, опыт программирования довольно плохой, теряется преимущество исходной предварительной компиляции CSS.

<style lang="sass" scoped>
</style>

Я использовал его позже, и сейчас он горячее.css in jsплан,styled-componentsочень качественное решение, по сравнению сCSSModuleЯ по-прежнему предпочитаю возможность сосредоточиться на написании кода стиля. Во многих случаях нам не нужно слишком много компонентов для изоляции.

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

Вот несколько распространенных решений:

  • Bem CssName
  • Style Component
  • CssModule
  • Css in js
import React from 'react';
import Styled from 'styled-components'

export default () => {
  const Wrapper = Styled.div`
    & >.title { 
      color: red;
      .model: {
        
      }
    }
  `
  const WrapperDIV2 = Styled.div`
  .title {
    .model: {
    }
  }
  `
  return (
    <Wrapper>Red Text Wrapper....
      <p className="title">1111</p>
      <WrapperDIV2>
        <p className="title">222</p>
      </WrapperDIV2>
    </Wrapper>
  );
}

позже

2020年, его можно рассматривать как двойную открытую фигуру переднего плана. С увеличением доли времени, затрачиваемого на разработку бизнеса, может случиться так, что в некоторых аспектах потребуется больше обучения. В случае, когда спецификации JavaScript становятся все более и более интенсивными ,2020лет не прошло2021ГодfeatureЭкспериментальная функция уже вышла, поэтому понимание новых знаний нельзя ослаблять. Базовые знания являются краеугольным камнем всей разработки проекта, поэтому мой конец года также является моим последним планом на этот год. Чтобы углубить фундамент, я сказать红宝书Для меня улучшение все еще относительно велико, и здесь я надеюсь, что каждый сможет стать лучшим инженером.

Если статья оказалась для вас полезной, ставьте лайк. Вы можете поделиться в разделе комментариев.

Категории