Erste Schritte mit der Konvertierung von Vue in React

Denn das neue Unternehmen nutzt den React-Technologie-Stack, darunter eine Reihe von Lösungen wie Umi, Dva und Ant-Design. Nachdem ich mich ein wenig damit vertraut gemacht hatte, wurde mir klar, dass es zwar einige Unterschiede gibt, diese aber dennoch sehr unterschiedlich sind. Nachfolgend werde ich einen einfachen Vergleich zwischen zwei beliebten Frameworks, react16 und vue2 (actively learning vue3), hinsichtlich Design, Schreibmethode, API, Lebenszyklus und populärer Ökologie anstellen:

Design

Komponentenkommunikation

reagieren: Streng einseitiger Datenfluss

• Abwärts gerichtete Stützen
• Up-Requisiten-Funktion
• Mehrstufiger Kontexttransfer

Befolgen Sie das Prinzip, dass alles Props sein können, onChange/setState()

Vue: Einweg-Datenfluss

• Stützen nach unten
• Ereignisse oben (abonnieren, um zu veröffentlichen)
• Mehrstufige Übergabe von $attrs und $listeners

Es gibt auch verschiedene Möglichkeiten, Komponenteninstanzen (VueComponent) abzurufen, z. B.: $refs, $parent, $children; übergeordnete oder untergeordnete Komponenten rekursiv abrufen, z. B.: findComponentUpward, findComponentsUpward; Komponenten auf hoher Ebene: bereitstellen/ablehnen, versenden/übertragen

Lebenszyklus

Ereignisbehandlung

reagieren

• React-Ereignisse werden in CamelCase statt in Kleinbuchstaben benannt.
• Wenn Sie die JSX-Syntax verwenden, müssen Sie als Ereignishandler eine Funktion übergeben, keinen String.
• Das Standardverhalten kann nicht durch die Rückgabe von „false“ verhindert werden. Sie müssen preventDefault explizit verwenden
• Kann nicht bei Nicht-Element-Tags deinstalliert werden, sonst wird es als Requisite weitergegeben

Funktion Form() {
  Funktion handleSubmit(e) {
    e.preventDefault();
    console.log('Sie haben auf „Senden“ geklickt.');
  }
  zurückkehren (
    <form onSubmit={handleSubmit}>
      <button type="submit">Senden</button>
    </form>
  );
}

Ansicht

Bei Verwendung auf normalen Elementen können nur native DOM-Ereignisse abgehört werden. Bei Verwendung auf einer benutzerdefinierten Elementkomponente können Sie auch auf benutzerdefinierte Ereignisse hören, die von untergeordneten Komponenten ausgelöst werden.

//Natives Ereignis <form v-on:submit.prevent="onSubmit"></form>
//Benutzerdefiniertes Ereignis <my-component @my-event="handleThis(123, $event)"></my-component>

Vue-Ereignismodifikatoren:

• .stop – Ruft event.stopPropagation() auf.
• .prevent – ​​ruft event.preventDefault() auf.
• .capture – Verwenden Sie den Erfassungsmodus, wenn Sie Ereignislistener hinzufügen.
• .self – Der Rückruf wird nur ausgelöst, wenn das Ereignis von dem Element ausgelöst wurde, an das der Listener gebunden ist.
• .native – überwacht native Ereignisse im Stammelement der Komponente.
• .once – löst den Rückruf nur einmal aus.
• .left – (2.2.0) Wird nur ausgelöst, wenn die linke Maustaste geklickt wird.
• .right – (2.2.0) Wird nur ausgelöst, wenn die rechte Maustaste geklickt wird.
• .middle – (2.2.0) Wird nur ausgelöst, wenn die mittlere Maustaste geklickt wird.
• .passive – (2.3.0) Fügt einen Listener im Modus { passive: true } hinzu

Klasse und Stil

Klasse

reagieren

rendern() {
  let className = "Menü";
  wenn (this.props.isActive) {
    Klassenname += 'Menü aktiv';
  }
  return <span className={className}>Menü</span>
}

Ansicht

<div
  Klasse="statisch"
  :Klasse="{ aktiv: ist aktiv, 'text-danger': hatFehler }"
></div>

 
<div :class="[{ aktiv: istAktiv }, Fehlerklasse]"></div>

Stil

reagieren

<div Stil = {{Farbe: 'rot', Schriftstärke: 'fett'}} />

Ansicht

<div :style="[BasisStyles, OverridingStyles]"></div>

Beim Stylen einer Komponente können Sie ein Tag mit Gültigkeitsbereich auf dem Style-Tag als Isolationsannotation für den Komponenten-Style deklarieren, z. B.: <style lang="sass" scoped></style>. Beim Verpacken werden die Stile tatsächlich mit einem eindeutigen Hashwert hinzugefügt, um CSS-Verschmutzung zwischen Komponenten zu vermeiden

Bedingtes Rendern

• reagieren: jsx-Ausdruck, && oder ternärer Ausdruck; false zurückgeben bedeutet kein Rendering
• vue: Der Ausdruck gibt true zurück, um gerendert zu werden, mehrere v-else-if und v-else können verschachtelt werden

Listen-Rendering

react: Bei Verwendung von .map ist der Schlüssel eines Elements vorzugsweise eine eindeutige Zeichenfolge, die das Element in der Liste hat

<ul>
  {props.posts.map((Beitrag) =>
    <li Schlüssel={post.id}>
      {post.title}
    </li>
  )}
</ul>

vue: Um Vue einen Hinweis zu geben, damit es die Identität jedes Knotens verfolgen und somit vorhandene Elemente wiederverwenden und neu anordnen kann, müssen Sie für jedes Element ein eindeutiges Schlüsselattribut angeben.

<li v-for="Artikel in Artikeln" :key="Artikel.Nachricht">
  {{ item.message }}
</li>

Komponentenschachtelung

reagieren

Standardsteckplätze

<div Klassenname = {'FancyBorder FancyBorder-' + props.color}>
  {props.children}
</div>

Benannte Slots

<div Klassenname="SplitPane">
  <div Klassenname="SplitPane-links">
    {props.left}
  </div>
  <div Klassenname = "SplitPane-rechts">
    {props.right}
  </div>
</div>

<SplitPane left={<Kontakte />} right={<Chat />} />

Ansicht

Standardsteckplätze

<Haupt>
  <Steckplatz></Steckplatz>
</main>

Benannte Slots

<Kopfzeile>
  <slot name="header"></slot>
</header>

Holen Sie sich den DOM

reagieren: Fokus, Textauswahl oder Medienwiedergabe verwalten. Löst eine erzwungene Animation aus. Integrieren Sie DOM-Bibliotheken von Drittanbietern

Klasse MyComponent erweitert React.Component {
  Konstruktor(Requisiten) {
    super(Requisiten);
    dies.meinRef = React.createRef();
  }
  rendern() {
    gibt <div ref={this.myRef} /> zurück;
  }
}

vue: wird verwendet, um Referenzinformationen für Elemente oder Unterkomponenten zu registrieren

<div ref="div">hallo</div>

dies.$refs.p.offsetHeight

Dokumentstruktur

Umi

├── config # UMI-Konfiguration, einschließlich Routing, Gebäude und andere Konfigurationen │ ├── config.ts # Projektkonfiguration.umirc.ts hat eine höhere Priorität und diese Methode erfordert das Löschen von .umirc.ts
│ ├── routes.ts # Routing-Konfiguration│ ├── defaultSettings.ts # Systemkonfiguration│ └── proxy.ts # Proxy-Konfiguration├── mock # Alle js- und ts-Dateien in diesem Verzeichnis werden als Mock-Dateien analysiert├── public # Alle Dateien in diesem Verzeichnis werden in den Ausgabepfad kopiert. Selbst wenn Hash konfiguriert ist, wird es nicht hinzugefügt├── src
│ ├── Assets # Lokale statische Ressourcen│ ├── Komponenten # Gemeinsame Geschäftskomponenten│ ├── E2E # Integrationstestfälle│ ├── Layouts # Globale Layoutdatei für konventionelles Routing│ ├── Modelle # Globales DVA-Modell
│ ├── pages # Alle Routing-Komponenten werden hier gespeichert │ │ └── document.ejs # Es wird vereinbart, dass diese Datei, falls vorhanden, als Standardvorlage verwendet wird │ ├── services # Backend-Schnittstellendienste │ ├── utils # Tool-Bibliothek │ ├── locales # Internationale Ressourcen │ ├── global.less # Globaler Stil │ ├── global.ts # Globales JS
│ └── app.ts # Laufzeitkonfigurationsdatei, z. B. zum Ändern von Routen, Ändern von Rendermethoden usw. ├── README.md
└── Paket.json

vue_cli

├── mock # Projekt-Mock-Simulationsdaten├── public # Statische Ressourcen│ └── index.html # HTML-Vorlage├── src # Quellcode│ ├── api # Alle Anfragen│ ├── asset # Designschriftarten und andere statische Ressourcen│ ├── components # Globale öffentliche Komponenten│ ├── directive # Globale Direktive│ ├── filters # Globaler Filter
│ ├── layout # Globales Layout
│ ├── router # Routing│ ├── store # Globale Store-Verwaltung│ ├── utils # Globale öffentliche Methoden│ ├── views # Ansichten aller Seiten│ ├── App.vue # Einstiegsseite│ └── main.js # Einstiegsdatei, Komponenteninitialisierung zum Laden usw.├── tests # Tests├── vue.config.js # Vue-CLI-Konfiguration wie Proxy, komprimierte Bilder└── package.json # package.json

Routenplanung

Dynamisches Routing und Routing-Parameter

Reagieren Sie auf Router

• Verlauf.push(/list?id=${id})
• history.push({Pfadname: '/Liste', Abfrage: {id}})
• Verlauf.push(/Liste/id=${id})
• history.push({Pfadname: '/Liste', Parameter: {id}})

Holen Sie sich props.match.query / props.match.params

Vue-Router

• dies.$router.push({Pfad: '/Liste', Abfrage: {id}})
• dies.$router.push({Pfad: '/Liste', Parameter: {id}})

Holen Sie sich this.$router.query / this.$router.params

Verschachtelte Routen

-reagieren

{
  Weg: '/',
  Komponente: '@/layouts/index',
  Routen: [
    { Pfad: '/Liste', Komponente: 'Liste' },
    { Pfad: '/admin', Komponente: 'admin' },
  ],
}

<div Stil={{ Polsterung: 20 }}>{ Eigenschaften.Kinder }</div>

Rendern von untergeordneten Routen mit props.children

Vue-Router

{
  Pfad: '/user/:id',
  Komponente: Benutzer,
  Kinder: [
    {
      Pfad: "Profil",
      Komponente: UserProfile
    },
    {
      Pfad: 'Beiträge',
      Komponente: UserPosts
    }
  ]
}

<div id="app">
  <Router-Ansicht></Router-Ansicht>
</div>

Verwenden Sie native Vue-Komponenten/<router-view/>-Komponenten, um Unterrouten darzustellen

Routensprung

umi

<NavLink exact to="/profile" activeClassName="selected">Profil</NavLink>
Verlauf.push(`/list?id=${id}`)

Ansicht

<router-link to="/about">Über</router-link>
dies.$router.push({Pfad: '/Liste', Abfrage: {id}})

Routing Guard (Anmeldeüberprüfung, spezielle Routing-Verarbeitung)

• Umi
• Vue-Router

Globaler Routing-Guard

Globaler Vorschutz: router.beforeEach

 const router = neuer VueRouter({ ... })
 router.beforeEach((bis, von, weiter) => {
   // ...
 })

Globaler Post-Guard: router.beforeEach

 router.afterEach((bis, von) => {
   // ...
 })

Zustandsverwaltung

Ein Status-Manager wird benötigt, wenn mehrere Ansichten vom gleichen Status abhängen oder wenn Verhaltensweisen aus verschiedenen Ansichten denselben Status ändern müssen.

verwenden

dva: Modellverbindungs-Benutzeroberfläche

// neues Modell: models/products.js
Standard exportieren {
  Namespace: "Produkte",
  Zustand: [],
  Reduzierstücke: {
    'löschen'(Status, {Nutzlast: ID}) {
      gibt Status.Filter zurück (Artikel => Artikel-ID !== ID);
    },
  },
};
//Modell verbinden
exportiere Standardverbindung (({ Produkte }) => ({
  Produkte,
}))(Produkte);

//Versandmodell reduzieren
Dispatch-Modell reduzieren ({
  Typ: 'Produkte/Löschen',
  Nutzlast: ID,
})

Wenn es asynchrone Operationen gibt, wie z. B. Ajax-Anfragen, Dispath-Modelleffekte und dann Effekte, die das Modell reduzieren
vuex

// neues Modul
const store = neuer Vuex.Store({
  Zustand: {
    Anzahl: 1
  },
  Mutationen:
    Inkrement(Zustand) {
      Zustand.Anzahl++
    }
  },
  Aktionen: {
    Inkrement(Kontext) {
      Kontext.commit('Inkrement')
    }
  }
})
//Benutzeroberfläche binden
<input v-model="$store.state[Modellname].name"/>
//Modulmutation festschreiben 
store.commit('Erhöhen')

Wenn es asynchrone Vorgänge gibt, wie z. B. Ajax-Anfragen, Dispath-Modulaktionen und dann Aktionen, die Modulmutationen aufrufen

speichern.Versand({
  Typ: „incrementAsync“,
  Menge: 10
})

Dies ist das Ende dieses Artikels über die Einführungsanleitung zur Konvertierung von Vue in React. Weitere relevante Inhalte zur Konvertierung von Vue in React finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!