One place for hosting & domains

      Grundlegendes

      Grundlegendes zu asynchronen Redux-Aktionen mit Redux Thunk.


      Einführung

      Standardmäßig werden die Aktionen von Redux synchron versendet, was ein Problem für jede nicht-triviale Anwendung ist, die mit einer externen API kommunizieren muss oder Nebenwirkungen ausführt. Redux ermöglicht auch Middleware, die zwischen dem Versand einer Aktion und dem Eintreffen der Aktion bei den Reduzierern angesiedelt ist.

      Es gibt zwei sehr beliebte Middleware-Bibliotheken, die Nebenwirkungen und asynchrone Aktionen ermöglichen: Redux Thunk und Redux Saga. In diesem Beitrag erkunden Sie Redux Thunk.

      Thunk ist ein Programmierkonzept, bei dem eine Funktion verwendet wird, um die Bewertung/Berechnung einer Aktion zu verzögern.

      Redux Thunk ist eine Middleware, mit der Sie Aktionserzeuger aufrufen können, die anstelle eines Aktionsobjekts eine Funktion zurückgeben.  Diese Funktion empfängt die Versandmethode des Speichers, die dann verwendet wird, um regelmäßige synchrone Aktionen innerhalb des Funktionskörpers zu versenden, sobald die asynchronen Operationen abgeschlossen sind.

      In diesem Artikel lernen Sie, wie Sie Redux Thunk hinzufügen und wie es in eine hypothetischen Todo-Anwendung passen kann.

      Voraussetzungen

      Dieser Beitrag geht davon aus, dass Sie einige grundlegende Kenntnisse von React und Redux haben. Wenn Sie mit Redux beginnen, können Sie auf diesen Beitrag verweisen.

      Dieses Tutorial baut auf einer hypothetischen Todo-Anwendung auf, die zu erledigende und abgeschlossene Tasks verfolgt.  Wir gehen davon aus, dass create-react-app verwendet wurde, um eine neue React-Anwendung zu generieren, und redux, react-redux und axios bereits installiert sind.

      Die genaueren Details, wie man eine Todo-Anwendung von Grund auf neu erstellt, werden hier nicht erläutert. Es wird als konzeptioneller Rahmen für die Hervorhebung von Redux Thunk präsentiert.

      Hinzufügen von redux-thunk

      Verwenden Sie zunächst das Terminal, um zum Projektverzeichnis zu navigieren und das redux-thunk Paket in Ihrem Projekt zu installieren:

      • npm install redux-thunk@2.3.0

      Anmerkung: Redux Thunk besteht nur aus 14 Zeilen Code. Sehen Sie sich die Quelle hier an, um zu erfahren, wie eine Redux Middleware unter der Oberfläche funktioniert.

      Verwenden Sie nun die Middleware bei der Erstellung Ihres App-Stores mit der Anwendung von Redux applyMiddleware. Angesichts einer React-Anwendung mit redux und react-redux sieht Ihre Datei index.js wie folgt aus:

      src/index.js

      import React from 'react';
      import ReactDOM from 'react-dom';
      import { Provider } from 'react-redux';
      import { createStore, applyMiddleware } from 'redux';
      import thunk from 'redux-thunk';
      import './index.css';
      import rootReducer from './reducers';
      import App from './App';
      import * as serviceWorker from './serviceWorker';
      
      // use applyMiddleware to add the thunk middleware to the store
      const store = createStore(rootReducer, applyMiddleware(thunk));
      
      ReactDOM.render(
        <Provider store={store}>
          <App />
        </Provider>,
        document.getElementById('root')
      );
      

      Jetzt wird Redux Thunk in Ihre Anwendung importiert und angewendet.

      Verwenden von Redux Thunk in einer Beispielanwendung

      Der häufigste Anwendungsfall für Redux Thunk ist die asynchrone Kommunikation mit einer externen API zum Abrufen oder Speichern von Daten. Mit Redux Thunk ist es einfach, Aktionen, die dem Lebenszyklus einer Anforderung folgen, an eine externe API zu senden.

      Bei der Erstellung eines neuen ToDo-Elements wird normalerweise zuerst eine Aktion gesendet, um anzuzeigen, dass die Erstellung eines ToDo-Elements begonnen hat.  Wenn dann das ToDo-Element erfolgreich erstellt und vom externen Server zurückgegeben wird, senden Sie eine weitere Aktion mit dem neuen ToDo-Element. Für den Fall, dass ein Fehler auftritt und das ToDo nicht auf dem Server gespeichert werden kann, kann stattdessen eine Aktion mit dem Fehler versendet werden.

      Sehen wir uns an, wie dies mit Redux Thunk erreicht werden kann.

      Importieren Sie in Ihrer Container-Komponente die Aktion und versenden Sie diese:

      src/containers/AddTodo.js

      import { connect } from 'react-redux';
      import { addTodo } from '../actions';
      import NewTodo from '../components/NewTodo';
      
      const mapDispatchToProps = dispatch => {
        return {
          onAddTodo: todo => {
            dispatch(addTodo(todo));
          }
        };
      };
      
      export default connect(
        null,
        mapDispatchToProps
      )(NewTodo);
      

      Die Aktion verwendet Axios um eine POST-Anfrage an den Endpunkt bei JSONPlaceholder zu senden (https://jsonplaceholder.typicode.com/todos):

      src/actions/index.js

      import {
        ADD_TODO_SUCCESS,
        ADD_TODO_FAILURE,
        ADD_TODO_STARTED,
        DELETE_TODO
      } from './types';
      
      import axios from 'axios';
      
      export const addTodo = ({ title, userId }) => {
        return dispatch => {
          dispatch(addTodoStarted());
      
          axios
            .post(`https://jsonplaceholder.typicode.com/todos`, {
              title,
              userId,
              completed: false
            })
            .then(res => {
              dispatch(addTodoSuccess(res.data));
            })
            .catch(err => {
              dispatch(addTodoFailure(err.message));
            });
        };
      };
      
      const addTodoSuccess = todo => ({
        type: ADD_TODO_SUCCESS,
        payload: {
          ...todo
        }
      });
      
      const addTodoStarted = () => ({
        type: ADD_TODO_STARTED
      });
      
      const addTodoFailure = error => ({
        type: ADD_TODO_FAILURE,
        payload: {
          error
        }
      });
      

      Beachten Sie, wie der AddTodo-Aktionserzeuger anstelle des regulären Aktionsobjekts eine Funktion zurückgibt. Diese Funktion empfängt die Versandmethode aus dem Store.

      Innerhalb des Funktionskörpers versenden Sie zunächst eine sofortige synchrone Aktion an den Store, um anzuzeigen, dass Sie begonnen haben, das Todo mit der externen API zu speichern. Dann stellen Sie die aktuelle POST-Anfrage mit Axios an den Server her. Bei einer erfolgreichen Antwort vom Server senden Sie eine synchrone Erfolgsaktion mit den von der Antwort empfangenen Daten, bei einer fehlgeschlagenen Antwort senden wir jedoch eine andere synchrone Aktion mit der Fehlermeldung.

      Bei Verwendung einer externen API, wie in diesem Fall JSONPlaceholder, ist es möglich, die tatsächliche Netzwerkverzögerung zu sehen. Wenn Sie jedoch mit einem lokalen Backend-Server arbeiten, kann es vorkommen, dass die Netzwerkreaktionen zu schnell erfolgen, um die Netzwerkverzögerung zu erfassen, die ein tatsächlicher Benutzer erfahren würde, so dass Sie bei der Entwicklung eine künstliche Verzögerung hinzufügen können:

      src/actions/index.js

      // ...
      
      export const addTodo = ({ title, userId }) => {
        return dispatch => {
          dispatch(addTodoStarted());
      
          axios
            .post(ENDPOINT, {
              title,
              userId,
              completed: false
            })
            .then(res => {
              setTimeout(() => {
                dispatch(addTodoSuccess(res.data));
              }, 2500);
            })
            .catch(err => {
              dispatch(addTodoFailure(err.message));
            });
        };
      };
      
      // ...
      

      Um Fehlerszenarien auszuprobieren, können Sie einen Fehler manuell einwerfen:

      src/actions/index.js

      // ...
      
      export const addTodo = ({ title, userId }) => {
        return dispatch => {
          dispatch(addTodoStarted());
      
          axios
            .post(ENDPOINT, {
              title,
              userId,
              completed: false
            })
            .then(res => {
              throw new Error('addToDo error!');
              // dispatch(addTodoSuccess(res.data));
            })
            .catch(err => {
              dispatch(addTodoFailure(err.message));
            });
        };
      };
      
      // ...
      

      Der Vollständigkeit halber hier ein Beispiel dafür, wie der Todo-Reducer aussehen könnte, um den gesamten Lebenszyklus der Anfrage zu bewältigen:

      src/reducers/todosReducer.js

      import {
        ADD_TODO_SUCCESS,
        ADD_TODO_FAILURE,
        ADD_TODO_STARTED,
        DELETE_TODO
      } from '../actions/types';
      
      const initialState = {
        loading: false,
        todos: [],
        error: null
      };
      
      export default function todosReducer(state = initialState, action) {
        switch (action.type) {
          case ADD_TODO_STARTED:
            return {
              ...state,
              loading: true
            };
          case ADD_TODO_SUCCESS:
            return {
              ...state,
              loading: false,
              error: null,
              todos: [...state.todos, action.payload]
            };
          case ADD_TODO_FAILURE:
            return {
              ...state,
              loading: false,
              error: action.payload.error
            };
          default:
            return state;
        }
      }
      

      Erkunden von getState

      Neben dem Empfangen der Versandmethode aus dem Zustand empfängt die von einem asynchronen Aktionserzeuger mit Redux Thunk zurückgegebene Funktion auch die getState Methode des Stores so, dass aktuelle Speicherwerte gelesen werden können:

      src/actions/index.js

      export const addTodo = ({ title, userId }) => {
        return (dispatch, getState) => {
          dispatch(addTodoStarted());
      
          console.log('current state:', getState());
      
          // ...
        };
      };
      

      Damit wird der aktuelle Zustand einfach auf die Konsole ausgedruckt.

      Beispiel:

      {loading: true, todos: Array(1), error: null}
      

      Die Verwendung von getState kann nützlich sein, die Dinge je nach aktuellen Zustand unterschiedlich zu handhaben.  Wenn Sie beispielsweise die Anwendung auf nur vier ToDo-Einträge auf einmal beschränken möchten, können Sie von der Funktion zurückkehren, wenn der Status bereits die maximale Anzahl an ToDo-Einträgen enthält:

      src/actions/index.js

      export const addTodo = ({ title, userId }) => {
        return (dispatch, getState) => {
          const { todos } = getState();
      
          if (todos.length > 4) return;
      
          dispatch(addTodoStarted());
      
          // ...
        };
      };
      

      Damit wird die Anwendung auf vier ToDo-Einträge beschränkt.

      Zusammenfassung

      In diesem Tutorial haben Sie das Hinzufügen von Redux Thunk zu einer React-Anwendung untersucht, um das asynchrone Zuweisen von Aktionen zu ermöglichen. Dies ist nützlich, wenn ein Redux-Speicher verwendet wird und man sich auf externe APIs verlässt.

      Wenn Sie mehr über React erfahren möchten, sehen Sie sich unsere Reihe Codieren in React.js an oder besuchen Sie unsere React-Themenseite für Übungen und Programmierprojekte.



      Source link

      Grundlegendes zum Rendern von Arrays in React


      Einführung

      In diesem Artikel erfahren Sie, wie eine Anordnung in React gerendert wird und welche bewährten Verfahren beim Rendern verschiedener Elemente innerhalb von Komponenten anzuwenden sind.

      Einer der Vorteile der Verwendung einer modernen Websprache wie JavaScript ist, dass Sie die Erzeugung von HTML schnell automatisieren können.

      Wenn Sie so etwas wie eine Schleife gegen eine Anordnung oder ein Objekt verwenden, müssen Sie das HTML pro Element nur einmal schreiben.  Besser noch, alle zukünftigen Bearbeitungen müssen nur einmal angewendet werden.

      Rendern mehrerer Elemente

      Um mehrere JSX-Elemente in React zu rendern, können Sie eine Anordnung mit der .map() -Methode durchlaufen und ein einzelnes Element zurückgeben.

      Unten durchlaufen Sie die reptiles-Anordnung und geben ein li-Element für jedes Element in der Anordnung zurück. Sie können diese Methode verwenden, wenn Sie ein einzelnes Element für jedes Element in der Anordnung anzeigen möchten:

      function ReptileListItems() {
        const reptiles = ["alligator", "snake", "lizard"];
      
        return reptiles.map((reptile) => <li>{reptile}</li>);
      }
      

      Die Ausgabe sieht in etwa folgendermaßen aus:

      Output

      - alligator - snake - lizard

      Im nächsten Beispiel prüfen Sie, warum Sie einen eindeutigen key zu einer Liste von Elementen hinzufügen möchten, die von einer Anordnung gerendert werden.

      Rendern einer Sammlung von Elementen innerhalb einer Komponente

      In diesem Beispiel durchlaufen Sie eine Anordnung und erstellen wie im vorherigen Beispiel eine Reihe von Listenelementkomponenten.

      Zu Beginn aktualisieren Sie den Code, um die <ol>-Komponente zum Speichern der <li>-Elemente zu verwenden. Die <ol>-Komponente erstellt eine geordnete Liste der Elemente:

      function ReptileList() {
        const reptiles = ["alligator", "snake", "lizard"];
      
        return (
          <ol>
            {reptiles.map((reptile) => (
              <li>{reptile}</li>
            ))}
          </ol>
        );
      }
      

      Wenn Sie jedoch auf die Konsole schauen, sehen Sie eine Warnung, dass jedes untergeordnete Element in einer Anordnung oder einem Iterator einen eindeutigen Schlüssel haben sollte.

      Warnung in der Konsole

      Die Warnung erscheint, da Sie beim Versuch, eine Sammlung innerhalb einer Komponente zu rendern, einen key hinzufügen müssen.

      In React wird ein eindeutiger key verwendet, um zu bestimmen, welche der Komponenten in einer Sammlung neu gerendert werden müssen. Durch das Hinzufügen eines eindeutigen keys wird verhindert, dass React bei jeder Aktualisierung die gesamte Komponente neu rendern muss.

      In diesem Schritt rendern Sie mehrere Elemente in einer Komponente und fügen einen eindeutigen key hinzu. Aktualisieren Sie den Code so, dass er einen key für die Listenelemente beinhaltet, um die Warnung zu beheben:

      function ReptileList() {
        const reptiles = ['alligator', 'snake', 'lizard'];
      
        return (
          <ol>
            {reptiles.map(reptile => (
              <li key={reptile}>{reptile}</li>
            ))}
          </ol>
        );
      }
      
      

      Nachdem Sie nun einen key hinzugefügt haben, wird die Warnung nicht mehr in der Konsole angezeigt.

      Im nächsten Beispiel sehen Sie, wie Sie benachbarte Elemente rendern können, ohne auf einen üblichen Syntaxfehler zu stoßen.

      Rendern benachbarter Elemente

      Um mehr als ein Element in einer Komponente zu rendern, müssen Sie einen Wrapper um diese Elemente hinzufügen.

      In diesem Beispiel geben Sie zunächst eine Liste von Elementen zurück, ohne eine Schleife durch eine Anordnung zu bilden:

      function ReptileListItems() {
        return (
          <li>alligator</li>
          <li>snake</li>
          <li>lizard</li>
        );
      }
      

      Dadurch erhalten Sie einen schweren Fehler in der Konsole:

      Schwerer Fehler von React für benachbarte JSX-Elemente

      Um diesen Fehler zu beheben, müssen Sie den Block von li-Elementen in einem Wrapper einpacken. Für eine Liste können Sie diese in ein ol oder ul packen:

      function ReptileListItems() {
        return (
        <ol>
          <li>alligator</li>
          <li>snake</li>
          <li>lizard</li>
        </ol>
        );
      }
      

      Die angrenzenden <li>-Elemente werden jetzt in ein umschließendes Tag <ol> eingehüllt,und Sie werden keinen Fehler mehr sehen.

      Im nächsten Abschnitt werden Sie eine Liste mit Hilfe einer Fragment-Komponente in einem Wrapper rendern.

      Rendern benachbarter Elemente mit React.fragment

      Vor React v16.2 können Sie einen Block von Komponenten in ein <div>-Element einpacken. Dies würde zu einer Anwendung voller divs führen, die oft als “div soup” bezeichnet wird.

      Um dieses Problem zu beheben, hat React eine neue Komponente veröffentlicht, die als Fragment-Komponente bekannt ist:

      Wenn Sie eine Liste innerhalb eines umschließenden Tags rendern müssen, aber vermeiden möchten, dass Sie eine div benutzen, können Sie stattdessen React.Fragment verwenden:

      function ReptileListItems() {
        return (
        <React.Fragment>
           <li>alligator</li>
           <li>snake</li>
           <li>lizard</li>
        </React.Fragment>
        );
      }
      

      Der gerenderte Code enthält nur die li-Elemente, und die React.Fragment-Komponente wird nicht im Code angezeigt.

      JSX-Elemente innerhalb eines React.Fragment Wrapper gerendert

      Beachten Sie auch, dass mit React.fragment keine Notwendigkeit besteht, einen Schlüssel hinzuzufügen.

      Sie werden feststellen, dass das Schreiben von React.fragment mühsamer als das Hinzufügen einer <div> ist. Glücklicherweise hat das React-Team eine kürzere Syntax entwickelt, um diese Komponente zu repräsentieren. Sie können <> </> anstelle von <React.Fragment></React.Fragment> verwenden:

      function ReptileListItems() {
        return (
       <>
          <li>alligator</li>
          <li>snake</li>
          <li>lizard</li>
       </>
        );
      }
      

      Zusammenfassung

      In diesem Artikel haben Sie verschiedene Beispiele für das Rendern von Anordnungen in einer React-Anwendung untersucht.

      Wenn Sie ein Element innerhalb einer anderen Komponente rendern, sollten Sie einen eindeutigen key verwenden und Ihre Elemente innerhalb eines Wrappers umfassen.

      Je nach Anwendungsfall können Sie einfache Listen erstellen, die in eine Fragment-Komponente gepackt werden und keinen Schlüssel benötigen.

      Um mehr über bewährte Praktiken in React zu erfahren, folgen Sie der vollständigen Reihe Wie man in React.js codiert auf DigitalOcean.



      Source link

      Grundlegendes zu Vue.js Lifecycle Hooks


      Einführung

      Lifecycle Hooks bieten einen Einblick in die Funktionsweise der von Ihnen verwendeten Bibliothek hinter den Kulissen. Mithilfe von Lifecycle Hooks können Sie feststellen, wann Ihre Komponente erstellt, dem DOM hinzugefügt, aktualisiert oder zerstört wird.

      Dieses Diagramm aus der offiziellen Vue.js-Dokumentation erfasst den Vue.js Instance-Lifecycle:

      Vue.js Instance-Lifecycle-Diagramm ansehen

      Dieser Artikel führt Sie in die Erstellung, Montage, Aktualisierung und Zerstörung von Hooks ein.

      Grundlegendes zu Creation Hooks (Initialisierung)

      Creation Hooks sind die allerersten Hooks, die in Ihrer Komponente ausgeführt werden. Mit ihnen können Sie Aktionen ausführen, bevor Ihre Komponente überhaupt zum DOM hinzugefügt wurde. Im Gegensatz zu allen anderen Hooks werden Creation Hooks auch beim serverseitigen Rendern ausgeführt.

      Verwenden Sie Creation Hooks, wenn Sie Dinge in Ihrer Komponente einrichten müssen, sowohl beim Client-Rendering als auch beim Server-Rendering.

      Sie haben keinen Zugriff auf DOM oder das Zielmontageelement (this.$el) innerhalb der Creation Hooks.

      beforeCreate

      Der beforeCreate Hook wird bei der Initialisierung Ihrer Komponente ausgeführt. Daten wurden nicht reaktiv gemacht und Ereignisse wurden noch nicht eingerichtet:

      ExampleComponent.vue

      <script>
      export default {
        beforeCreate() {
          console.log('At this point, events and lifecycle have been initialized.')
        }
      }
      </script>
      

      In diesem Beispiel protokolliert dieser Snippet die Nachricht, wenn der beforeCreate-Hook ausgeführt wird: Zu diesem Zeitpunkt werden Ereignisse und Lebenszyklus initialisiert.

      erstellt

      Sie können auf reaktive Daten und Ereignisse zugreifen, die mit dem erstellten Hook aktiv sind. Vorlagen und Virtual DOM wurden noch nicht montiert oder zurückgegeben:

      ExampleComponent.vue

      <template>
        <div ref="example-element">{{ propertyComputed }}</div>
      </template>
      
      <script>
      export default {
        data() {
          return {
            property: 'Example property.'
          }
        },
      
        computed: {
          propertyComputed() {
            return this.property
          }
        },
      
        created() {
          console.log('At this point, this.property is now reactive and propertyComputed will update.')
          this.property = 'Example property updated.'
        }
      }
      </script>
      

      In diesem Beispiel speichert der Snippet Eigenschaft als Beispieleigenschaft. Wenn der erstellte Hook ausgeführt wird, wird eine Nachricht von An diesem Punkt ist diese.Eigenschaft nun reaktiv und propertyComputed wird aktualisiert, protokolliert. Und dann wird die Eigenschaft in Beispieleigenschaft aktualisiert geändert.

      Später im Lebenszyklus wird {{ propertyComputed }} als Beispieleigenschaft aktualisiert anstelle von Beispieleigenschaft angezeigt.

      In diesem Schritt haben Sie einige Beispiele für Creation Hooks überprüft und sind bereit, zum nächsten Teil des Lebenszyklus zu wechseln, die Mounting Hooks.

      Grundlegendes zu Mounting Hooks (DOM-Eingabe)

      Mounting Hooks sind die am häufigsten verwendeten Hooks. Sie ermöglichen es Ihnen, sofort vor und nach dem ersten Rendern auf Ihre Komponente zuzugreifen. Sie werden jedoch nicht während des serverseitigen Renderings ausgeführt.

      Verwenden Sie Mounting Hooks, wenn Sie auf das DOM Ihrer Komponente sofort vor oder nach dem ersten Rendern zugreifen oder es ändern müssen.

      Verwenden Sie keine Mounting Hooks, wenn Sie Daten für Ihre Komponente bei der Initialisierung abrufen müssen.

      Hinweis: Verwenden Sie stattdessen erstellt (oder erstellt und aktiviert für Komponenten, die am Leben gehalten werden sollen). Besonders, wenn Sie diese Daten während des serverseitigen Renderings benötigen.

      beforeMount

      Der beforeMount Hook wird direkt vor dem ersten Rendering ausgeführt und nachdem die Vorlage oder Renderfunktionen kompiliert wurden:

      ExampleComponent.vue

      <script>
      export default {
        beforeMount() {
          console.log(`At this point, vm.$el has not been created yet.`)
        }
      }
      </script>
      

      In diesem Beispiel protokolliert dieser Snippet bei der Ausführung des beforeMount Hook die Nachricht: Zu diesem Zeitpunkt wurde vm.$el noch nicht erstellt.

      montiert

      Im montierten Hook haben Sie vollen Zugriff auf die reaktive Komponente, die Vorlagen und das zurückgegebene DOM (über this.$el).

      Verwenden Sie zur Änderung des DOM montiert – insbesondere bei der Integration von nicht-Vue-Bibliotheken:

      ExampleComponent.vue

      <template>
        <div ref="example-element">Example component.</div>
      </template>
      
      <script>
      export default {
        mounted() {
          console.log(`At this point, vm.$el has been created and el has been replaced.`);
          console.log(this.$el.textContent) // Example component.
        }
      }
      </script>
      

      In diesem Beispiel protokolliert dieser Snippet die Nachricht, wenn der montierte Hook ausgeführt wird Zu diesem Zeitpunkt wurde vm.$el erstellt und el ersetzt. Außerdem wird eine Nachricht von Beispielinhalt. (this.$el.textContent) protokolliert.

      In diesem Abschnitt haben Sie Anwendungsfälle für Mounting Hooks erkundet. Im nächsten Schritt überprüfen Sie einige Beispiele, die Updating Hooks verwenden.

      Grundlegendes zu Updating Hooks (Diff & Re-render)

      Updating Hooks werden aufgerufen, wenn eine reaktive Eigenschaft, die von Ihrer Komponente verwendet wird, sich ändert oder etwas anderes ein erneutes Rendering verursacht. Sie ermöglichen es Ihnen, den Zyklus watch-compute-render für Ihre Komponente zu haken.

      Verwenden Sie Updating Hooks, wenn Sie wissen müssen, wann Ihre Komponente neu gerendert wird, z. B. für das Debuggen oder das Profiling.

      Verwenden Sie die Updating Hooks nicht, wenn Sie wissen müssen, wann sich eine reaktive Eigenschaft auf Ihrer Komponente ändert. Verwenden Sie stattdessen computed Eigenschaften oder Watchers.

      beforeUpdate

      Der beforeUpdate Hook wird nach Datenänderungen Ihrer Komponente ausgeführt und der Update-Zyklus beginnt, unmittelbar bevor das DOM gepatcht und neu gerendert wird.

      Verwenden Sie beforeUpdate, wenn Sie den neuen Status aller reaktiven Daten auf Ihrer Komponente erhalten müssen, bevor sie tatsächlich zurückgegeben wird:

      ExampleComponent.vue

      <template>
        <div ref="example-element">{{counter}}</div>
      </template>
      
      <script>
      export default {
        data() {
          return {
            counter: 0
          }
        },
      
        created() {
          setInterval(() => {
            this.counter++
          }, 1000)
        },
      
        beforeUpdate() {
          console.log(`At this point, Virtual DOM has not re-rendered or patched yet.`)
          // Logs the counter value every second, before the DOM updates.
          console.log(this.counter)
        }
      }
      </script>
      

      Zuerst speichert dieser Snippet Zähler als 0. Wenn der erstellte Hook ausgeführt wird, wird er den Zähler alle 1000 ms erhöhen. Wenn der beforeUpdate-Hook ausgeführt wird, protokolliert dieses Snippet die Nachricht: Zu diesem Zeitpunkt hat Virtual DOM noch nicht neu gerendert oder gepatcht. Eine Zahl für Zähler wird protokolliert.

      aktualisiert

      Der aktualisierte Hook wird nach Datenänderungen Ihrer Komponente und den Neu-Renderings des DOM ausgeführt.

      Verwenden Sie aktualisiert, wenn Sie nach einer Eigenschaftsänderung auf DOM zugreifen müssen:

      ExampleComponent.vue

      <template>
        <div ref="example-element">{{counter}}</div>
      </template>
      
      <script>
      export default {
        data() {
          return {
            counter: 0
          }
        },
      
        created() {
          setInterval(() => {
            this.counter++
          }, 1000)
        },
      
        updated() {
          console.log(`At this point, Virtual DOM has re-rendered and patched.`)
          // Fired every second, should always be true
          console.log(+this.$refs['example-element'].textContent === this.counter)
        }
      }
      </script>
      

      Zuerst speichert dieser Snippet Zähler als 0. Wenn der erstellte Hook ausgeführt wird, wird er den Zähler alle 1000 ms erhöhen. Wenn der aktualisierte Hook ausgeführt wird, protokolliert dieses Snippet die Nachricht: Zu diesem Zeitpunkt hat Virtual DOM erneut gerendert und gepatcht. und ein boolescher Wert von wahr wird protokolliert, da der gerenderte Wert und der aktuelle Wert gleich sind.

      Nachdem Sie nun die Verwendung der Updating Hooks kennengelernt haben, sind Sie bereit, mehr über Destruction Hooks zu erfahren.

      Grundlegendes zu Destruction Hooks (Teardown)

      Destruction Hooks ermöglichen Ihnen, Aktionen durchzuführen, wenn Ihre Komponente zerstört wird, wie das Übergeben von Analysen und Bereinigungen. Sie werden abgegeben, wenn Ihre Komponente zerstört und aus DOM entfernt wird.

      beforeDestroy

      beforeDestroy wird direkt vor dem Löschen abgegeben. Ihre Komponente wird immer noch vollständig vorhanden und funktionell sein.

      Verwenden Sie beforeDestroy, wenn Sie Ereignisse oder reaktive Abonnements löschen müssen:

      ExampleComponent.vue

      <script>
      export default {
        data() {
          return {
            exampleLeakyProperty: 'This represents a property that will leak memory if not cleaned up.'
          }
        },
      
        beforeDestroy() {
          console.log(`At this point, watchers, child components, and event listeners have not been teared down yet.`)
          // Perform the teardown procedure for exampleLeakyProperty.
          // (In this case, effectively nothing)
          this.exampleLeakyProperty = null
          delete this.exampleLeakyProperty
        }
      }
      </script>
      

      Dieses Snippet speichert zunächst exampleLeakyProperty. Wenn der beforeDestroy Hook ausgeführt wird, protokolliert dieser Snippet die Nachricht An diesem Punkt wurden Watchers, untergeordnete Komponenten und Ereignis-Listener noch nicht zerstört. und dann exampleLeakyProperty gelöscht.

      zerstört

      Bis zu den zerstörten Hook erreichen, ist praktisch nichts mehr in Ihrer Komponente. Alles, was daran hing, wurde zerstört.

      Verwenden Sie zerstört, wenn Sie eine Last-Minute-Bereinigung ausführen oder einen Remote-Server darüber informieren müssen, dass die Komponente zerstört wurde:

      ExampleComponent.vue

      <script>
      import ExampleAnalyticsService from './example-analytics-service'
      
      export default {
        destroyed() {
          console.log(`At this point, watchers, child components, and event listeners have been torn down.`)
          console.log(this)
          ExampleAnalyticsService.informService('Component destroyed.')
        }
      }
      </script>
      

      Zuerst importiert dieser Snippet ExampleAnalyticsService. Wenn der beforeDestroy Hook ausgeführt wird, protokolliert dieser Snippet die Nachricht An diesem Punkt wurden Watchers, untergeordnete Komponenten und Ereignis-Listener zerstört. Was von der Komponente übrig bleibt, wird in die Konsole protokolliert und ExampleAnalyticsService wird an die Nachricht Komponente zerstört übergeben.

      Damit haben Sie Ihre allgemeine Überprüfung der Vue.js Lifecycle Hooks abgeschlossen.

      Andere Hooks

      Es gibt zwei weitere Hooks, aktiviert und deaktiviert. Diese sind für keep-alive Komponenten, ein Thema, das außerhalb des Geltungsbereichs dieses Artikels liegt.

      Es genügt zu sagen, dass sie es Ihnen ermöglichen, zu erkennen, wenn eine Komponente, die in einem Tag <keep-alive></keep-alive> eingegeben wird, ein- oder ausgeschaltet wird. Vielleicht verwenden Sie sie, um Daten für Ihre Komponente abzurufen oder Statusänderungen zu verarbeiten, wobei sie sich als erstellt und beforeDestroy effektiv verhalten, ohne dass eine vollständige Neuerstellung der Komponente erforderlich ist.

      Zusammenfassung

      In diesem Artikel wurden Ihnen verschiedene Lifecycle Hooks vorgestellt, die im Vue.js Instance Lifecycle verfügbar sind. Sie haben die verschiedenen Anwendungsfälle für die Erstellung von Hooks, die Montage von Hooks, die Aktualisierung von Hooks und die Zerstörung von Hooks erkundet.

      Wenn Sie mehr über Vue.js erfahren möchten, lesen Sie unsere Themenseite zu Vue.js für Übungen und Programmierprojekte.



      Source link