Häufige Fehler bei der Verwendung von React Hooks

Häufige Fehler bei der Verwendung von React Hooks

React Hooks ist eine neue Funktion, die in React 16.8 eingeführt wurde und es uns ermöglicht, Status und andere Funktionen zu verwenden, ohne Klassen zu verwenden. Das Problem, das React Hooks lösen soll, ist die Statusfreigabe. Es ist die dritte Lösung zur Wiederverwendung von Statuslogik nach Render-Props und Komponenten höherer Ordnung und verursacht nicht das JSX-Verschachtelungshölle-Problem.

Warum Hooks?

Bevor ich Hooks vorstelle, möchte ich Ihnen zunächst die Methoden zur Komponentenerstellung von React erläutern. Eine davon sind Klassenkomponenten und die andere sind reine Funktionskomponenten. Das React-Team hofft, dass Komponenten nicht zu komplexen Containern werden, sondern nur Pipelines für den Datenfluss sein sollten. Entwickler können Pipelines nach Bedarf kombinieren. Dies bedeutet, dass Komponenten am besten als Funktionen und nicht als Klassen geschrieben werden. .

Funktionskomponenten eignen sich besser zum Trennen von Geschäftslogikcodes und Wiederverwenden von Komponenten als Klassenkomponenten. Funktionskomponenten sind außerdem leichter als Klassenkomponenten. Vor React-Hooks konnten Funktionskomponenten LocalState nicht implementieren, was bedeutete, dass Komponenten mit LocalState nicht mithilfe von Funktionskomponenten geschrieben werden konnten. Dies begrenzte den Anwendungsbereich von Funktionskomponenten, während React-Hooks die Fähigkeiten von Funktionskomponenten erweiterten. Bei der Nutzung sollten Sie jedoch auch auf folgende Punkte achten, da Sie sonst in die Falle tappen und Leistungseinbußen verursachen. Befolgen Sie die nachstehenden Schritte, um diese Fallen zu vermeiden.

1. Extrahieren Sie Variablen und Methoden, die nicht mit Statusänderungen außerhalb der Komponentenfunktion zusammenhängen

Bei jeder Zustandsänderung wird der gesamte Funktionsbaustein erneut ausgeführt. Dies hat zur Folge, dass die innerhalb der Funktionskomponente definierten Methoden und Variablen neu erstellt werden und ihnen Speicher neu zugewiesen wird, was sich auf die Leistung auswirkt.

importiere React, {useState,useCallback} von „react“;

// Testen, ob die Methode bei jeder Statusänderung den Speicher neu zuweist let testFooMemoAlloc = new Set();

const Page = (Eigenschaften: beliebig) => {
  console.log('Bei jeder Statusänderung wird die Funktionskomponente von Anfang an ausgeführt.')
  const [Anzahl, Anzahl festlegen] = useState(0);
  const calc = () => {
    setCount(Anzahl + 1);
  }

  const bar = {
    eine:1,
    b:2,
    c: 'Variablendefinitionen unabhängig vom Status'
  }
 
  const doFoo = () => {
    console.log('Methoden, die nicht mit dem Status in Zusammenhang stehen');

  }
  testFooMemoAlloc.add(doFoo)
  
  zurückkehren (
    <>
      <button onClick={calc}>1 hinzufügen</button>
      <p>Anzahl:{Anzahl}</p>
      <p>Wenn testFooMemoAlloc.size zunimmt, bedeutet dies, dass der Speicher jedes Mal neu zugewiesen wird: {testFooMemoAlloc.size}</p>
    </>
  )
}

Standardseite exportieren;

Mit Statusänderungen in Zusammenhang stehende Variablen und Methoden müssen in der Hook-Komponente platziert werden, während mit dem Status nicht in Zusammenhang stehende Variablen und Methoden außerhalb der Funktionskomponente extrahiert werden können, um eine Neuzuweisung des Speichers bei jeder Statusaktualisierung zu vermeiden. Sie können auch useMemo und useCallback verwenden, um Variablen bzw. Funktionen zu umschließen und so den gleichen Effekt zu erzielen, der später erläutert wird.

importiere React, {useState,useCallback} von „react“;

// Testen, ob die Methode bei jeder Statusänderung den Speicher neu zuweist let testFooMemoAlloc = new Set();

const bar = {
  eine:1,
  b:2,
  c: 'Variablendefinitionen unabhängig vom Status'
}

const doFoo = () => {
  console.log('Methoden, die nicht mit dem Status in Zusammenhang stehen');

}

const Page = (Eigenschaften: beliebig) => {
  console.log('Bei jeder Statusänderung wird die Funktionskomponente von Anfang an ausgeführt.')
  const [Anzahl, Anzahl festlegen] = useState(0);
  const calc = () => {
    setCount(Anzahl + 1);
  }

  testFooMemoAlloc.add(doFoo)
  
  zurückkehren (
    <>
      <button onClick={calc}>1 hinzufügen</button>
      <p>Anzahl:{Anzahl}</p>
      <p>Wenn testFooMemoAlloc.size zunimmt, bedeutet dies, dass der Speicher jedes Mal neu zugewiesen wird: {testFooMemoAlloc.size}</p>
    </>
  )
}

Standardseite exportieren;

2. Unterkomponenten mit Memo verpacken

Die Einführung von untergeordneten Komponenten durch übergeordnete Komponenten führt zu unnötig wiederholtem Rendern. Jedes Mal, wenn die übergeordnete Komponente die Anzahl aktualisiert, wird die untergeordnete Komponente aktualisiert.

importiere React, {useState} von "react";
const Child = (Eigenschaften: beliebig) => {
    console.log('Unterkomponente?')
    zurückkehren(
        <div>Ich bin eine untergeordnete Komponente</div>
    );
}
const Page = (Eigenschaften: beliebig) => {
    const [Anzahl, Anzahl festlegen] = useState(0);
    zurückkehren (
        <>
            <button onClick={(e) => { setCount(count+1) }}>1 hinzufügen</button>
            <p>Anzahl:{Anzahl}</p>
            <Kind />
        </>
    )
}

Standardseite exportieren;

Bei Verwendung von Memos werden die Unterkomponenten der Anzahl der Änderungen nicht aktualisiert

importiere React, {useState, memo} von "react";
const Child = memo((Eigenschaften: beliebig) => {
    console.log('Unterkomponente?')
    zurückkehren(
        <div>Ich bin eine untergeordnete Komponente</div>
    );
})
const Page = (Eigenschaften: beliebig) => {
    const [Anzahl, Anzahl festlegen] = useState(0);
    zurückkehren (
        <>
            <button onClick={(e) => { setCount(count+1) }}>1 hinzufügen</button>
            <p>Anzahl:{Anzahl}</p>
            <Kind />
        </>
    )
}

Standardseite exportieren;

Durch Übergeben eines zweiten Parameters an Memo ist ein umfassender Vergleich von Objekten möglich. Wenn sich der von der untergeordneten Komponente übergebene Eigenschaftswert nicht ändert, führt die untergeordnete Komponente kein sinnloses Rendering durch.

Memo ist nicht nur auf Funktionskomponenten anwendbar, sondern auch auf Klassenkomponenten. Es ist eine Komponente höherer Ordnung. Standardmäßig führt es nur oberflächliche Vergleiche bei komplexen Objekten durch. Wenn Sie einen tiefen Vergleich durchführen möchten, können Sie einen zweiten Parameter übergeben. Im Gegensatz zu shouldComponentUpdate wird das Rendern nicht ausgelöst, wenn deepCompare true zurückgibt, aber wenn es false zurückgibt, wird es ausgelöst. Und shouldComponentUpdate ist genau das Gegenteil.

importiere React, {useState, memo } von „react“;
importiere deepCompare aus "./deepCompare";

const Child = memo((Eigenschaften: beliebig) => {
    console.log('Unterkomponente')
  zurückkehren (
      <>
      <div>Ich bin eine untergeordnete Komponente</div>
      <div>{ props.fooObj.a}</div>
      </>
    );
}, tiefVergleichen)

const Page = (Eigenschaften: beliebig) => {
  const [Anzahl, Anzahl festlegen] = useState(0);
  const [fooObj, setFooObj] = useState({ a: 1, b: { c: 2 } })
  console.log('Seitenrendering beginnt')
  const calc = () => {
    setCount(Anzahl + 1);
    wenn (Anzahl === 3) {
      setFooObj({ b: { c: 2 }, a: Anzahl })
    }
  }
  const doBar = () => {
    console.log('Übergeben Sie die Methode an die untergeordnete Komponente, um zu testen, ob dadurch unnötiges Rendering verursacht wird.')
  }
    zurückkehren (
        <>
        <button onClick={calc}>1 hinzufügen</button>
        <p>Anzahl:{Anzahl}</p>
        <Untergeordnetes fooObj={fooObj} doBar={doBar} />
        </>
    )
}

Standardseite exportieren;
// Zwei Objekte eingehend vergleichen um zu sehen ob sie gleich sind export default function deepCompare(prevProps: any, nextProps: any) {
  const len: Zahl = Argumente.Länge;
  : Wenn Sie leftChain ändern, ändern Sie dies in "alle" und "alle".
  rechte Kette: beliebig = [];
  // // console.log({ argumente });
  //
  wenn (Länge < 2) {
    // console.log('Sie müssen zwei Objekte übergeben, um die Eigenschaften der beiden Objekte zu vergleichen');
    gibt true zurück;
  }
  // für (lass i = 1; i < len; i++) {
  // linke Kette = [];
  // rechte Kette = [];
  console.log({ vorherigeProps, nächsteProps });
  wenn (!vergleiche2Objekte(vorherigeProps, nächsteProps, linkeKette, rechteKette)) {
    // console.log('Die beiden Objekte sind nicht gleich');
    gibt false zurück;
  }
  // }
  // console.log('Die beiden Objekte sind gleich');

  gibt true zurück;
}

Funktion compare2Objects(prevProps: beliebig, nextProps: beliebig, leftChain: beliebig, rightChain: beliebig) {
  var p;

  // Wenn beide Werte NaN sind, sind sie in JS nicht gleich, aber es ist sinnvoll, sie hier als gleich zu betrachten, if (isNaN(prevProps) && isNaN(nextProps) && typeof prevProps === 'number' && typeof nextProps === 'number') {
    gibt true zurück;
  }

  // Vergleich der ursprünglichen Werte if (prevProps === nextProps) {
    console.log('ursprünglicher Wert', vorherigeProps, nächsteProps);
    gibt true zurück;
  }

  //Typvergleich konstruierenwenn (
    (Typ der vorherigen Props === „Funktion“ und Typ der nächsten Props === „Funktion“) ||
    (vorherigeProps-Instanz von Date && nächsteProps-Instanz von Date) ||
    (vorherigeProps-Instanz von RegExp && nächsteProps-Instanz von RegExp) ||
    (prevProps-Instanz von String && nextProps-Instanz von String) ||
    (vorherigeProps-Instanz von Nummer und nächsteProps-Instanz von Nummer)
  ) {
    console.log('Funktion', prevProps.toString() === nextProps.toString());
    return prevProps.toString() === nextProps.toString();
  }

  // Wenn die Werte der beiden Vergleichsvariablen null und undefiniert sind, werden sie hier beendet, if (!(prevProps instanceof Object && nextProps instanceof Object)) {
    console.log(prevProps, nextProps, 'prevProps-Instanz des Objekts && nextProps-Instanz des Objekts');
    gibt false zurück;
  }

  wenn (prevProps.isPrototypeOf(nextProps) || nextProps.isPrototypeOf(prevProps)) {
    console.log('prevProps.isPrototypeOf(nextProps) || nextProps.isPrototypeOf(prevProps)');
    gibt false zurück;
  }

  // Wenn die Konstruktoren nicht gleich sind, sind die beiden Objekte nicht gleich, wenn (prevProps.constructor !== nextProps.constructor) {
    console.log('vorherigerProps.Konstruktor !== nächsterProps.Konstruktor');
    gibt false zurück;
  }

  // Wenn die Prototypen nicht gleich sind, sind die beiden Objekte nicht gleich, wenn (prevProps.prototype !== nextProps.prototype) {
    console.log('vorherigerProps.prototype !== nächsterProps.prototype');
    gibt false zurück;
  }

  wenn (leftChain.indexOf(prevProps) > -1 || rightChain.indexOf(nextProps) > -1) {
    console.log('leftChain.indexOf(prevProps) > -1 || rightChain.indexOf(nextProps) > -1');
    gibt false zurück;
  }

  // Durchlaufe das nächste Eigenschaftsobjekt und gib dabei dem Vergleich ungleicher Fälle Priorität for (p in nextProps) {
    wenn (nextProps.hasOwnProperty(p) !== prevProps.hasOwnProperty(p)) {
      console.log('nextProps.hasOwnProperty(p) !== prevProps.hasOwnProperty(p)');
      gibt false zurück;
    } sonst wenn (Typ von nextProps[p] !== Typ von prevProps[p]) {
      console.log('Typ der nächstenProps[p] !== Typ der vorherigenProps[p]');
      gibt false zurück;
    }
  }
  // console.log('p in prevProps');
  // Durchlaufe das vorherige Eigenschaftsobjekt und gib dabei dem Vergleich ungleicher Fälle Priorität for (p in prevProps) {
    // Ob ein bestimmter Eigenschaftswert existiert if (nextProps.hasOwnProperty(p) !== prevProps.hasOwnProperty(p)) {
      console.log('nextProps.hasOwnProperty(p) !== prevProps.hasOwnProperty(p)');
      gibt false zurück;
    }
    // Sind die Typen der Eigenschaftswerte gleich, sonst wenn (typeof nextProps[p] !== typeof prevProps[p]) {
      console.log('Typ der nächstenProps[p] !== Typ der vorherigenProps[p]');
      gibt false zurück;
    }

    console.log('Typ der vorherigenProps[p]', Typ der vorherigenProps[p]);
    Schalter (Typ der vorherigen Eigenschaften[p]) {
      // Objekttyp und Funktionstyp Verarbeitungsfall 'Objekt':
      Fall 'Funktion':
        leftChain.push(vorherigeProps);
        rechteChain.push(nextProps);

        wenn (!vergleiche2Objekte(vorherigeProps[p], nächsteProps[p], linkeKette, rechteKette)) {
          console.log('!compare2Objects(vorherigeProps[p], nächsteProps[p], linkeChain, rechteChain)');
          gibt false zurück;
        }

        leftChain.pop();
        rightChain.pop();
        brechen;

      Standard:
        // Grundlegende Typverarbeitung if (prevProps[p] !== nextProps[p]) {
          gibt false zurück;
        }
        brechen;
    }
  }

  gibt true zurück;
}

3. Komponentenmethoden mit useCallback umschließen

Wenn die übergeordnete Komponente eine Methode an die untergeordnete Komponente übergibt, scheint Memo keine Wirkung zu haben. Unabhängig davon, ob es sich um eine durch const definierte Methode, eine Pfeilfunktion oder eine durch bind definierte Methode handelt, wird sie von der untergeordneten Komponente trotzdem ausgeführt.

importiere React, { useState, memo } von „react“;
//Beispiel für unnötiges Rendern der Schnittstelle ChildProps {
  Änderungsname: ()=>void;
}
const FunChild = ({ changeName}: ChildProps): JSX.Element => {
  console.log('normale Funktionsunterkomponente')
  zurückkehren(
      <>
          <div>Ich bin eine normale Funktionsunterkomponente</div>
          <button onClick={changeName}>Schaltfläche für normale Funktionsunterkomponente</button>
      </>
  );
}
const FunMemo = memo(FunChild);

const ArrowChild = ({ changeName}: ChildProps): JSX.Element => {
  console.log('Pfeilfunktionsunterkomponente')
  zurückkehren(
      <>
          <div>Ich bin eine Unterkomponente einer Pfeilfunktion</div>
          <button onClick={changeName.bind(null,'test')}>Pfeilfunktions-Unterkomponentenschaltfläche</button>
      </>
  );
}
const ArrowMemo = memo(ArrowChild);

const BindChild = ({ changeName}: ChildProps): JSX.Element => {
  console.log('Bind-Funktionsunterkomponente')
  zurückkehren(
      <>
          <div>Ich bin eine Unterkomponente der Bind-Funktion</div>
          <button onClick={changeName}>Schaltfläche für Unterkomponente der Funktion binden</button>
      </>
  );
}
const BindMemo = memo(BindChild);

const Page = (Eigenschaften: beliebig) => {
  const [Anzahl, Anzahl festlegen] = useState(0);
  konstanter Name = "Test";

  const Änderungsname = Funktion() {
    console.log('Testen Sie die an die Unterkomponente übergebene Methode. Wird die Unterkomponente nach der Verwendung von useCallback immer noch ungültig gerendert?');
  }

  zurückkehren (
      <>
          <button onClick={(e) => { setCount(count+1) }}>1 hinzufügen</button>
          <p>Anzahl:{Anzahl}</p>
          <ArrowMemo changeName={()=>changeName()}/>
          <BindMemo changeName={changeName.bind(null)}/>
          <FunMemo changeName={changeName} />
      </>
  )
}

Standardseite exportieren;

Verwenden Sie useCallback mit dem Parameter [], nachdem die Seite zunächst gerendert wurde, ändern Sie den Wert von count, und die Unterkomponenten, die normale Funktionen übergeben, werden nicht mehr gerendert, aber die Unterkomponenten, die Pfeilfunktionen und in Bind geschriebene Methoden übergeben, werden weiterhin gerendert

importiere React, { useState, memo, useCallback} von „react“;
//Beispiel für unnötiges Rendern der Schnittstelle ChildProps {
  Änderungsname: ()=>void;
}
const FunChild = ({ changeName}: ChildProps): JSX.Element => {
  console.log('normale Funktionsunterkomponente')
  zurückkehren(
      <>
          <div>Ich bin eine normale Funktionsunterkomponente</div>
          <button onClick={changeName}>Schaltfläche für normale Funktionsunterkomponente</button>
      </>
  );
}
const FunMemo = memo(FunChild);

const ArrowChild = ({ changeName}: ChildProps): JSX.Element => {
  console.log('Pfeilfunktionsunterkomponente')
  zurückkehren(
      <>
          <div>Ich bin eine Unterkomponente einer Pfeilfunktion</div>
          <button onClick={changeName.bind(null,'test')}>Pfeilfunktions-Unterkomponentenschaltfläche</button>
      </>
  );
}
const ArrowMemo = memo(ArrowChild);

const BindChild = ({ changeName}: ChildProps): JSX.Element => {
  console.log('Bind-Funktionsunterkomponente')
  zurückkehren(
      <>
          <div>Ich bin eine Unterkomponente der Bind-Funktion</div>
          <button onClick={changeName}>Schaltfläche für Unterkomponente der Funktion binden</button>
      </>
  );
}
const BindMemo = memo(BindChild);

const Page = (Eigenschaften: beliebig) => {
  const [Anzahl, Anzahl festlegen] = useState(0);
  konstanter Name = "Test";

  const changeName = useCallback(() => {
    console.log('Testen Sie die an die Unterkomponente übergebene Methode. Wird die Unterkomponente nach der Verwendung von useCallback immer noch ungültig gerendert?');
  },[])

  zurückkehren (
      <>
          <button onClick={(e) => { setCount(count+1) }}>1 hinzufügen</button>
          <p>Anzahl:{Anzahl}</p>
          <ArrowMemo changeName={()=>changeName()}/>
          <BindMemo changeName={changeName.bind(null)}/>
          <FunMemo changeName={changeName} />
      </>
  )
}

Standardseite exportieren;

4. Verwenden Sie useMemo, um Objektvariablen in Komponenten einzuschließen

Wenn die untergeordnete Komponente Memo und UseCallback verwendet, wird eine Objekteigenschaft an die untergeordnete Komponente übergeben. Wenn sich der Objektwert und die Methode nicht geändert haben, wird die untergeordnete Komponente unabhängig von der Statusänderung der übergeordneten Komponente neu gerendert.

importiere React, { useState, memo, useCallback} von „react“;
//Beispiel für unnötiges Rendern von untergeordneten Komponenten - Übergeben eines Objekteigenschaftswerts an die untergeordnete Komponente bei Verwendung der Schnittstelle memo und useCallback ChildProps {
  untergeordneter Stil: {Farbe: Zeichenfolge;Schriftgröße: Zeichenfolge;};
  Änderungsname: ()=>void;
}
const FunChild = ({ childStyle,changeName}: ChildProps): JSX.Element => {
  console.log('normale Funktionsunterkomponente')
  zurückkehren(
      <>
          <div style={childStyle}>Ich bin eine normale untergeordnete Funktionskomponente</div>
          <button onClick={changeName}>Schaltfläche für normale Funktionsunterkomponente</button>
      </>
  );
}
const FunMemo = memo(FunChild);

const Page = (Eigenschaften: beliebig) => {
  const [Anzahl, Anzahl festlegen] = useState(0);
  const childStyle = {Farbe:'grün',Schriftgröße:'16px'};

  const changeName = useCallback(() => {
    console.log('Testen Sie die an die Unterkomponente übergebene Methode. Wird die Unterkomponente nach der Verwendung von useCallback immer noch ungültig gerendert?');
  },[])

  zurückkehren (
      <>
          <button onClick={(e) => { setCount(count+1) }}>1 hinzufügen</button>
          <p>Anzahl:{Anzahl}</p>
          <FunMemo childStyle={childStyle} changeName={changeName} />
      </>
  )
}

Standardseite exportieren;

Durch die Verwendung von useMemo kann das Problem unnötiger Aktualisierungen bei der Übergabe von Objekteigenschaften an untergeordnete Komponenten gelöst werden.

importiere React, { useState, memo, useMemo, useCallback} von „react“;
//Beispiel für unnötiges Rendern der Schnittstelle ChildProps {
  untergeordneter Stil: {Farbe: Zeichenfolge;Schriftgröße: Zeichenfolge;};
  Änderungsname: ()=>void;
}
const FunChild = ({ childStyle,changeName}: ChildProps): JSX.Element => {
  console.log('normale Funktionsunterkomponente')
  zurückkehren(
      <>
          <div style={childStyle}>Ich bin eine normale untergeordnete Funktionskomponente</div>
          <button onClick={changeName}>Schaltfläche für normale Funktionsunterkomponente</button>
      </>
  );
}
const FunMemo = memo(FunChild);

const Page = (Eigenschaften: beliebig) => {
  const [Anzahl, Anzahl festlegen] = useState(0);
  const [name, setName] = useState("");
  const childStyle = {Farbe:'grün',Schriftgröße:'16px'};

  const changeName = useCallback(() => {
    setName('Name ändern')
  }, [])
  const childStyleMemo = useMemo(() => {
    zurückkehren {
      Farbe: Name === 'Name ändern' ? 'rot':'grün',
      Schriftgröße: '16px'
    }
  }, [Name])

  zurückkehren (
      <>
          <button onClick={(e) => { setCount(count+1) }}>1 hinzufügen</button>
          <p>Anzahl:{Anzahl}</p>
          <FunMemo childStyle={childStyleMemo} changeName={changeName} />
      </>
  )
}

Standardseite exportieren;

Oben finden Sie den detaillierten Inhalt des Leitfadens zur Vermeidung der Verwendung von React Hooks. Weitere Informationen zur Verwendung von React Hooks finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung zum Übergeben von Werten zwischen React-Hook-Komponenten (mithilfe von ts)
  • ReactHooks Batch-Update-Status und Abrufen von Routenparametern Beispielanalyse
  • Detaillierte Erklärung zu React Hooks
  • 30 Minuten, um Ihnen ein umfassendes Verständnis von React Hooks zu vermitteln
  • So funktionieren React Hooks
  • Häufige Verwendung von Hooks in React
  • Einführung in 10 Hooks in React

<<:  Perfektes Installationstutorial für das Dualsystem Win10 + Ubuntu 16.04 [detailliert]

>>:  Detaillierte Schritte zum Erstellen der visuellen Portainer-Schnittstelle mit Docker

Artikel empfehlen

Detaillierte Erläuterung des Beispiels zum Exportieren von Daten aus einer angegebenen Tabelle in MySQL

Detaillierte Erklärung zum MySQL-Export von Daten...

MySQL 8.0.11 Installationshandbuch für Mac

MAC installiert mysql8.0, der spezifische Inhalt ...

Referenz zum Detaildesign des Benutzererlebnisses auf B2C-Websites

Als ich kürzlich Apple.com/Ebay.com/Amazon.com/sh...

JavaScript zum Erzielen eines Mauszieheffekts

In diesem Artikel wird der spezifische JavaScript...

Verwenden einer MySQL-Datenbank mit Python 3.4 unter Windows 7

Der detaillierte Prozess der Verwendung der MySQL...

Der Unterschied zwischen Hash-Modus und Verlaufsmodus im Vue-Router

vue-router hat zwei Modi Hash-Modus Verlaufsmodus...

Einige Datenverarbeitungsmethoden, die häufig in JS verwendet werden können

Inhaltsverzeichnis DOM-Verarbeitung Arrays Verfah...

So erstellen Sie mit CSS eine Bildlaufleiste mit fester Navigation und Links- und Rechtsverschiebung

Wie oben gezeigt ist die Navigation oben fixiert ...

Node verwendet das Modul async_hooks zur Anforderungsverfolgung

Das Modul async_hooks ist eine experimentelle API...

Webdesign muss Zweck, Ideen, Gedanken und Beständigkeit haben

<br />Einleitung: Diese Idee kam mir, als ic...

So starten Sie das Quellcode-Debugging von Tomcat in Idea und rufen Tomcat zum Debuggen auf

Wenn Sie das Idea-Entwicklungstool zum Debuggen v...

Natives JS zum Erzielen eines Schiebeknopfeffekts

Der spezifische Code des mit Js erstellten Schieb...

Vue implementiert die Anmeldung mit grafischem Bestätigungscode

In diesem Artikelbeispiel wird der spezifische Co...

Zehn Erfahrungen bei der Präsentation chinesischer Webinhalte

<br /> Ich habe mich auf die drei Aspekte Te...

Implementierungsmethode für HTML-Neun-Raster-Layouts

Die Diversifizierung von Website-Layouts ist unse...