Grundlegende JavaScript-Konzepte, die Sie lernen sollten, bevor Sie mit React beginnen

React ist eine beliebte Javascript-Bibliothek, die zum Erstellen realer Anwendungen verwendet wird. Um ein kompetenter React-Entwickler zu werden, ist es wichtig, einige grundlegende Javascript-Konzepte zu verstehen. Für viele mag das Erlernen von React schwierig erscheinen, aber das Verstehen dieser Grundkonzepte könnte den Lernprozess erleichtern.
In diesem Artikel werde ich 15 wesentliche Konzepte behandeln, die jeder Entwickler kennen sollte, bevor er mit React beginnt. Jedes Konzept wird anhand eines Beispiels erläutert, um seine Bedeutung zu verdeutlichen.
Wenn Sie gerade erst mit React beginnen oder die Bibliothek erkunden möchten, ist dieser Artikel genau das Richtige für Sie.

15 grundlegende JavaScript-Konzepte

1.Rückruffunktion
Funktionen sind die Bausteine ​​jedes Programms, das es ermöglicht, Code mehrmals ohne Wiederholung aufzurufen.
Eine Art von Funktion ist die Callback-Funktion.
Wenn Sie möchten, dass ein Benutzer auf einen Pfeil im Browser klickt, bevor Informationen angezeigt werden, oder dass einige Codes direkt ausgeführt werden sollen, nachdem Sie mit dem Abrufen der Daten von der API fertig sind, können Sie die Leistungsfähigkeit von Rückrufen nutzen.
Die Callback-Funktion führt ihre Aufgabe nach dem Eintreten einer Funktion oder eines Ereignisses aus und ermöglicht die Kontrolle über die Ausführung einer Funktion.
Es handelt sich um eine Funktion, die als Argument an eine andere Funktion übergeben und verwendet wird, um anzugeben, was nach Abschluss einer asynchronen Operation oder eines Ereignisses geschehen soll.

Beispiel

// The callback function
function showText() {
  console.log('The written text should show after 2 seconds.');
}
 function showAfterDelay(callback, delay) {
  setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);

2.Pfeilfunktionen
Arrow Functions wurde in ES6 eingeführt und ermöglicht eine präzisere Beschreibung der Funktionssyntax. Die Pfeilfunktion wird aufgrund ihrer Prägnanz häufig in React verwendet.

Beispiel

const showText = () => {
  console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
  setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);

3.Array.Map()-Methode
Von der Mutation des vorhandenen Arrays wird in React häufig abgeraten, da dies zu unnötigen Fehlern und Leistungsproblemen führen könnte. Aus diesem Grund verwenden Entwickler die Array-Methoden. Die funktionalen Array-Methoden verändern nicht das ursprüngliche Array, sondern geben ein neues Array aus dem vorhandenen zurück.
Eine der funktionalen Array-Methoden ist die Methode Array.map().
Array.map()-Methoden durchlaufen in einer Schleife ein vorhandenes Array und geben ein neues Array mit derselben Länge zurück. Änderungen können am neuen Array vorgenommen werden, ohne Auswirkungen auf das bestehende zu haben.

Beispiel

Const BookNumbers = [1,2,3,4];
Const DoubleNumbers = BookNumbers.map((book)=> book *2);
Console.log(DoubleNumbers);
//Output BookNumbers= [2,4,6,8]

4.Array.Filter()-Methode
Die Methode Array.filter() funktioniert auf interessante und logische Weise. Diese Methoden können verwendet werden, um einige Elemente des Arrays basierend auf einer wahren oder falschen Bedingung herauszufiltern.
Wenn eine Aussage falsch ist, wird sie automatisch herausgefiltert, und wenn sie wahr ist, bleibt sie erhalten, was sie zu einem geeigneten Ansatz zum Entfernen unerwünschter Elemente aus einem Array macht.

Beispiel

// The callback function
function showText() {
  console.log('The written text should show after 2 seconds.');
}
 function showAfterDelay(callback, delay) {
  setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);

5.Array.reduce()-Methode
Wie der Name schon sagt, reduziert die Methode array.reduce() ein gesamtes Array auf einen einzelnen Wert. Dies ist eine der besten Methoden zum Summieren oder Gruppieren von Elementen eines Arrays.

3 wichtige Schlüsselwörter in der Reduziermethode

• Der Anfangswert (optional): Ein Startwert für den Akkumulator. Wenn nicht angegeben, wird das erste Array-Element als Anfangswert verwendet und die Iteration beginnt beim zweiten Element.
• Akkumulator (erforderlich):Das akkumulierte Ergebnis aus früheren Iterationen.
• Aktueller Wert (erforderlich): Das aktuell verarbeitete Element.

Beispiel

const showText = () => {
  console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
  setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);

6.Vorlagenliterale
Vorlagenliterale ermöglichen es Zeichenfolgen, Javascript-Variablen oder beliebige JavaScript-Ausdrücke zu enthalten.
Es bietet einen einfachen Ansatz zum Erstellen von Zeichenfolgen in JavaScript unter Verwendung der Backticks und des Dollars mit geschweiften Klammern ${}.

Beispiel

Const BookNumbers = [1,2,3,4];
Const DoubleNumbers = BookNumbers.map((book)=> book *2);
Console.log(DoubleNumbers);
//Output BookNumbers= [2,4,6,8]

7.Ternäre Operatoren
Ternäre Operatoren sind bedingte Operatoren, die eine einfache und prägnante Möglichkeit bieten, eine if..else-Anweisung zu schreiben.
React unterstützt die if..else-Anweisung nicht direkt, da sie nicht für den Syntaxausdruck JSX geeignet ist, der in React.
vorhanden ist JSX ist eine Syntaxerweiterung von JavaScript, die die Einbettung von Javascript, CSS und React Component in HTML ermöglicht.
Die React-Syntax wird eher als Ausdruck denn als Anweisung betrachtet und der Ternär dient als geeigneter Operator dafür.

Beispiel

Const BookNumbers = [1,2,3,4];
Const FilteredNumbers = BookNumbers.filter((book) => book % 2 !== 0 );
Console.log(FilteredNumbers);
// Output 1,3

8.Kurzschlüsse und logische Operatoren
Logische Operatoren werden verwendet, um mehrere Bedingungen in einem einzigen Ausdruck zu kombinieren. Die wichtigsten logischen Operatoren, die in JavaScript existieren, sind:

• UND- gibt nur dann wahr zurück, wenn beide Operanden wahr sind.
• OR- gibt „true“ zurück, wenn mindestens ein Operand wahr ist.
• NICHT – wahre Werte seines Operanden invertieren..

Kurzschließen ist ein Verhalten, das bei logischen Operatoren auftritt, bei denen unter bestimmten Bedingungen der zweite Operand nicht ausgewertet wird, da das Ergebnis des gesamten Ausdrucks allein durch den ersten Operanden bestimmt werden kann.

Wie Kurzschließen funktioniert

UND (&&)

• Wenn der erste Operand falsch ist, ist der gesamte Ausdruck falsch, sodass der zweite Operand nicht bewertet wird.
• Wenn der erste Operand wahr ist, wird der zweite Operand ausgewertet, um den zurückgegebenen Wert zu bestimmen.

ODER (||)

• Wenn der erste Operand wahr ist, ist der gesamte Ausdruck wahr, sodass der zweite Operand nicht ausgewertet wird.
• Wenn der Operand falsch ist, wird der zweite Operand ausgewertet, um den zurückzugebenden Wert zu bestimmen.

// The callback function
function showText() {
  console.log('The written text should show after 2 seconds.');
}
 function showAfterDelay(callback, delay) {
  setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);

9.RestSpread-Operator
In Fällen, in denen Sie eine neue Eigenschaft zu einem vorhandenen Array hinzufügen oder eine Gruppe bestehender Arrays zusammenführen möchten, ist der Spread-Operator der Go-to-Operator.
Spread-Operator (...), gekennzeichnet durch 3 Punkte, erweitert ein Array in einzelne Elemente und wird am Anfang eines Arrays verwendet. Es wird verwendet um:

• Array zusammenführen

const showText = () => {
  console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
  setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);

• Array kopieren

Const BookNumbers = [1,2,3,4];
Const DoubleNumbers = BookNumbers.map((book)=> book *2);
Console.log(DoubleNumbers);
//Output BookNumbers= [2,4,6,8]

• Fügen Sie eine neue Eigenschaft zu einem vorhandenen Array hinzu

Const BookNumbers = [1,2,3,4];
Const FilteredNumbers = BookNumbers.filter((book) => book % 2 !== 0 );
Console.log(FilteredNumbers);
// Output 1,3

• übergeben Sie ein Argument an eine Funktion

const BookNumbers = [1, 2, 3, 4];
const NumberSum = BookNumbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // Output: 15

Rest-Operator(...) wird ebenfalls mit den 3 Punkten gekennzeichnet, steht aber am Ende eines Arrays. Es wird verwendet, um mehrere Eigenschaften von einem destrukturierten Objekt/Array zu sammeln.

Beispiel

Const NameValue = "Ade";
const NumValue = 5;
const TempLit= `I am ${NameValue}, a ${NumValue} year old girl `

10.Optionale Verkettung
Die optionale Verkettung verarbeitet Null- oder undefinierte Werte auf einfache Weise. Es wird verwendet, um auf Eigenschaften oder Zwischeneigenschaften zuzugreifen, die in der Kette scheinbar null oder undefiniert sind. Es wird automatisch kurzgeschlossen und undefiniert gemacht. Im Idealfall wird ohne optionale Verkettung ein Fehler zurückgegeben.
In manchen Fällen sind Sie nicht sicher, ob alle Werte in einem Objekt vorhanden sind. Erwägen Sie die Verwendung einer optionalen Verkettung, da es sich um eine Syntax handelt, die Prüfungen auf Null- und undefinierte Werte ermöglicht.

const BookNumbers = 4;
const result = (BookNumbers % 2 === 0) ? "Even" : "Odd";
console.log(result); 
// Output: "Even"

11.Destrukturierendes Array
Codes können umständlich werden, wenn mehrere Eigenschaften gleichzeitig aus einem Array aufgerufen werden müssen. Mit Destrukturierung kann dies verhindert werden.
Die Destrukturierung ermöglicht das Zusammensetzen von Werten aus einem Array in eine eindeutige Variable.
Destrukturierung kann dazu verwendet werden

• Ein Element überspringen
• Elemente verschachteln
• Standardwerte festlegen.

Ein wesentliches Konzept, das vor dem Start von React nicht ignoriert werden sollte, ist die Destrukturierung.

const idVerify = true;
const displayMessage = idVerify && "Identified";

console.log(displayMessage); 
// Output: "Identified"

12.Arbeiten mit unveränderlichen Arrays
Arrays können in JavaScript verändert werden, was bedeutet, dass Eigenschaften in einem Array hinzugefügt, entfernt oder aktualisiert werden können.
In React wird jedoch häufig Unveränderlichkeit bevorzugt, um die Zustandsintegrität zu wahren und sicherzustellen, dass React Änderungen erkennen kann. Um mit unveränderlichen Arrays in React zu arbeiten, werden häufig Methoden wie Map, Filter und der Spread-Operator verwendet, um Elemente in Arrays hinzuzufügen, zu löschen und zu aktualisieren, ohne das ursprüngliche Array zu verändern.

Beispiel

• Einen Artikel hinzufügen

// The callback function
function showText() {
  console.log('The written text should show after 2 seconds.');
}
 function showAfterDelay(callback, delay) {
  setTimeout(callback, delay);
}
showAfterDelay(showText, 2000);

• Um ein Element zu löschen

const showText = () => {
  console.log('This written text should show after 2 seconds.');
};
const showAfterDelay = (callback, delay) => {
  setTimeout(callback, delay);
};
showAfterDelay(showText, 2000);

• Um ein Element zu aktualisieren

Const BookNumbers = [1,2,3,4];
Const DoubleNumbers = BookNumbers.map((book)=> book *2);
Console.log(DoubleNumbers);
//Output BookNumbers= [2,4,6,8]

13.Async/await-Funktion
Asynchrones JavaScript regelt, wie Aufgaben ausgeführt werden, deren Ausführung Zeit in Anspruch nimmt. JavaScript ist eine synchrone Sprache, d. h. sie führt einen Code nacheinander in einem einzelnen Thread aus.
In Fällen, in denen Sie Daten aus einer Datenbank abrufen, müssen möglicherweise einige Codes geladen werden, bevor der Abruf abgeschlossen ist.
Mit der asynchronen Funktion kann Code ausgeführt werden, ohne auf den Abschluss der Vorgänge warten zu müssen, wodurch die Benutzererfahrung und die Gesamtleistung verbessert werden.
In React arbeiten Sie häufig mit der Anwendungsprogrammierschnittstelle (API). Daher ist es wichtig, einen Einblick in die Funktionsweise dieser Funktion zu haben.

Beispiel

Const BookNumbers = [1,2,3,4];
Const FilteredNumbers = BookNumbers.filter((book) => book % 2 !== 0 );
Console.log(FilteredNumbers);
// Output 1,3

14.Versprechen
Versprechen bezieht sich auf integrierte Objekte, die den eventuellen Abschluss oder Misserfolg eines asynchronen Vorgangs darstellen.
Versprechen bestehen in einem der drei Staaten:

• Ausstehend: Ausgangszustand, weder erfüllt noch abgelehnt.
• Erfüllt: Vorgang erfolgreich abgeschlossen
• Abgelehnt: Beim Vorgang ist ein Fehler aufgetreten.

Promises spielen in JavaScript eine wichtige Rolle, weshalb es ein wichtiges Konzept ist, das man kennen lernen sollte. Es ermöglicht Ihnen, saubereren Code zu schreiben, Fehler systematisch zu behandeln und die Gesamtleistung zu steigern.

15.Fehlerbehandlung mit try.catch.finally
Es gibt Momente, in denen beim Datenabruf Fehler auftauchen und Sie darüber nachdenken, wie Sie diese Fehler finden oder beheben können.
Durch die Verwendung der Schlüsselwörter wird der Datenabruf strukturierter gehandhabt.
Der Try..catch..finally-Block ist ein leistungsstarkes Fehlerbehandlungskonstrukt in JavaScript, mit dem potenzielle Fehler erfolgreich behandelt und bestimmte Codes ausgeführt werden können, unabhängig davon, ob ein Fehler auftritt.
Es kann zeitaufwändig sein, bestimmte Fehler in Ihrem Code zu finden. Durch die Verwendung dieser Blöcke wird es einfach.

• Versuchen – Schließt den Code ein, der möglicherweise einen Fehler auslöst.
• Catch – ausführen, wenn im Try-Block ein Fehler ausgegeben wird. Erhält Fehlerobjekte als Argument.
• Abschließend – Ausführen, unabhängig davon, ob ein Fehler auftritt.

Beispiel

const BookNumbers = [1, 2, 3, 4];
const NumberSum = BookNumbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // Output: 15

Abschluss

Einblicke in die oben erläuterten wesentlichen JavaScript-Konzepte zu gewinnen, wird den Lernprozess erleichtern und Sie auf dem Weg zu einem kompetenten React-Entwickler führen. Wenn Sie diese Konzepte noch nicht gelernt haben, versuchen Sie es nachzuholen. Teilen Sie Ihre Vorschläge gerne im Kommentarbereich mit!

Das obige ist der detaillierte Inhalt vonGrundlegende JavaScript-Konzepte, die Sie lernen sollten, bevor Sie mit React beginnen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!