Was ist React und wie funktioniert es?

React ist eine Javascript-Bibliothek zum Erstellen von Benutzeroberflächen. Jetzt sind zwei Dinge wichtig: das eine ist die Javascript-Bibliothek und das andere die Benutzeroberflächen. Eine Bibliothek ist eine Codesammlung, die wir zur Erstellung unserer Anwendung wiederverwenden können. Durch die Verwendung von React und einer Codesammlung können wir unsere Webanwendung, Mobilanwendung, Desktopanwendung und Benutzeroberfläche erstellen.

Wenn wir über eine Anwendung sprechen, besteht sie grundsätzlich aus zwei Teilen. Das eine ist das Frontend (also die Benutzeroberfläche), das andere ist das Backend, in dem sich die gesamte Logik befindet.
Das Frontend ist der Teil, in dem der Benutzer interagiert, z. B. durchsuchen, auf Schaltflächen klicken, Formulare senden usw. Dann antwortet unser Frontend mit Backend darauf.
Und das Backend enthält viele komplexe Logiken und Daten, wie Authentifizierung, Autorisierung, Datenmanipulation usw.
Aber React kümmert sich überhaupt nicht um das Backend. React funktioniert nur mit der Benutzeroberfläche.

Wenn wir jetzt über das Web sprechen, wissen wir, dass Javascript die Standardprogrammiersprache des Browsers ist. Aber React ist keine Programmiersprache, sondern nur eine Javascript-Bibliothek.
Das heißt, alles, was wir in React tun, ist letztendlich nichts anderes als reines Vanilla-Javascript.

Nun, lassen Sie mich Ihnen eine Frage stellen. React kam 2013 auf den Markt, Bruder. Haben wir also nicht schon vorher eine Benutzeroberfläche erstellt?
Ja, das haben wir schon einmal mit reinem Javascript und jQuery gemacht.
Die Frage ist nun, warum React erneut kam? Was wäre das Problem mit Javascript?
Um zu verstehen, welches Problem React tatsächlich löst, müssen wir etwas tiefer graben. Tauchen wir tief ein...!

Wir werden es anhand einer kleinen Anwendung sehen. Wir erstellen eine kleine Zähleranwendung, wie Sie unten sehen können, einen einfachen HTML-Code mit zwei IDs namens counterNumber und button.

Schauen Sie sich nun das JavaScript-Codebild an. Es gibt einen einfachen Code. Ich habe nicht vor, Ihnen diesen Code zu erklären. Pass auf, was ich meine.

counterNumber und button werden als DOM-Elemente ausgewählt, dann wird der Zählwert mit addEventListener um 1 erhöht. Anschließend wird dort der Wert von counterNumberEl aktualisiert. Was ist hier wirklich los? Wenn Sie genau hinschauen, werden Sie verstehen, dass es grundsätzlich zwei Funktionen gibt:

1. Wir wollen die Elemente ergreifen und mit ihnen arbeiten.
2. Aktualisieren der Benutzeroberfläche (Benutzeroberfläche)

Also, was ist hier das Problem? Der Code funktioniert! Angenommen, Sie benötigen zwei Gegenanwendungen. Was ist dann zu tun?

Sie müssen zu diesem HTML-Code zurückkehren und sich ein neues Div schnappen, und zwar separat mit den neuen IDs. Dann sollte die Benutzeroberfläche später aktualisiert werden.

Jetzt spreche ich nur von zwei Gegenanwendungen, aber wenn es zu viele Interaktionen und komplexe Benutzeroberflächen gibt, werden Entwickler überfordert sein. Das ist das Hauptproblem! Einerseits erstellen Sie Funktionalität, andererseits aktualisieren Sie die Benutzeroberfläche, was sehr mühsam wird.

Als ein Unternehmen wie Facebook vor diesem riesigen Problem stand, erstellte Jordan Walke, ein Facebook-Softwareentwickler, 2011 React.js, inspiriert vom Component Based Framework XHP-js von PHP. Es wurde erstmals 2011 im Newsfeed von Facebook implementiert und 2012 in Instagram eingesetzt. Open-Source-React.js im Jahr 2013.

Jetzt wissen wir, warum wir React verwenden. Lassen Sie uns also die Gegenanwendung, die wir mit Vanilla JS erstellt haben, jetzt mit React durchführen. Dann wird Ihre Zuversicht zunehmen, wie viel einfacher das Leben der Entwickler nach React geworden ist. Gehen wir zum Code…

Zunächst zeige ich Ihnen, wie Sie React bequem installieren, aber in unserem Projekt verwendet niemand React auf diese Weise. Ich zeige es nur so, um das Verständnis zu erleichtern, damit Sie es von der Kernebene aus verstehen können.

Hier habe ich React gerade mit diesem Link verbunden, wie es auf der Website „react.org“ heißt. Wenn ich nun zur Datei „react.js“ gehe und „console.log(React)“ und „console.log(ReactDOM)“ schreibe, dann können wir zwei Objekte in der Konsole sehen, das bedeutet, dass unser React verbunden ist. Beachten Sie, dass sich im Body-Tag nichts weiter als ein leeres div befindet, sondern nur eine ID namens root.

In JavaScript können wir Elemente im DOM auf die gleiche Weise erstellen, wie wir zuerst mit Selektoren gearbeitet haben. Ebenso können wir Elemente auch in React erstellen. Hier wird ein Div erstellt, darin wird „Hello World“ mit dem Tag „p“ gedruckt. Während dies im Moment kein Problem zu sein scheint, ist das Leben vorbei, wenn Sie zu viele Elemente erstellen! Immer wieder das Gleiche zu tun, ist ein Problem. Aus diesem Grund hat React ein eigenes Markup namens JSX (JavaScript XML) erstellt. Obwohl es wie HTML aussieht, ist es tatsächlich JSX.

So steht es im Bild oben. Aber die Sache ist, dass der Browser dieses JSX nicht versteht. Um dieses Problem zu lösen, kommt unser Transpiler Babel, der unser JSX in Vanilla JS transpiliert, das der Browser versteht.

Um Babel zu verbinden, besuchen Sie unsere Website > Einrichtung > Kopieren Sie diesen Link unter das Body-Tag meiner HTML- und JS-Datei, die ich erstellt habe =“text/babel“ dort.

Da es sich nun um JSX handelt, können wir hier jedes gewünschte JavaScript schreiben. Vereinfachen wir also diese Syntax. Zuerst fügen wir es in eine JS-Funktion ein.

Beachten Sie hier, myElement tare, ich habe gerade eine Funktion namens „Inkrement“ eingefügt und die Inkrementfunktion so zu gestalten, macht es einfacher, in React zu schreiben. Jetzt können wir den JS hier schreiben, wenn wir hier mit dem vorherigen JS-Code gearbeitet hätten, hätte es funktioniert. Aber React sagt, dass Sie nicht über UI-Updates nachdenken müssen, wenn Sie den Status so verwalten möchten, wie ich es tue. In React stellen sie also eine Funktion namens useState bereit. Ich zeige, wie man sie verwendet.

Dieser useState dient als Status unserer Inkrementierungsschaltfläche. UseState ist standardmäßig auf einen Wert eingestellt, der den Standardwert in unserem Status anzeigt. In diesem Fall müssen wir 0 angeben. Die useState-Funktion gibt uns im Grunde ein Array zurück, das zwei Dinge enthält – eines ist der Wert, den wir angeben, und das andere ist eine Funktion, die den Statuswert aktualisiert. Jetzt haben wir das Array durch Destrukturierung getrennt.

Wenn wir nun den Zähler als Anfangswert haben möchten, können wir nach der Rückgabe {counter} wie folgt anstelle von 0 angeben. Dies nennt man Interpolation. Jetzt ändert sich der Wert des Zählers dynamisch. Und in der Schaltfläche onClick (da es sich um JSX handelt, sollte sie wie onClick nach Camelcase geschrieben werden) sollte eine Funktionalität aufgerufen werden.

Wenn ich es so gebe, dann ist es erledigt, aber hier gibt es ein Problem. Wenn ich die setCounter-Funktion so aufrufe, wird sie bereits aufgerufen, was wir nicht wollen. Wir möchten, dass sich der Wert der Schaltfläche erhöht, wenn jemand darauf klickt. Wir müssen also eine anonyme Pfeilfunktion erstellen, dann wird das Problem gelöst.

Wenn Sie nun bemerken, dass wir die Benutzeroberfläche hier nicht manuell aktualisiert haben, indem wir ein Element des DOM erfasst haben, haben wir React hier nur gesagt, was wir wollen, der Rest hat React die Benutzeroberfläche selbst aktualisiert.

Als wir nun das JS-Beispiel gaben, bestand das größte Problem, das wir mit JS hatten, darin, die Benutzeroberfläche manuell aktualisieren zu müssen. Wenn wir die Anwendung erneut verwenden wollten, müssten wir immer wieder dasselbe tun.

Aber React löst diese beiden Probleme. Wir haben gesehen, wie React funktioniert, ohne die Benutzeroberfläche manuell zu aktualisieren. Jetzt werden wir sehen, wie React uns hilft, wenn wir diese Anwendung an zwei bis drei Stellen verwenden müssen.

Sehen Sie hier, ich habe gerade <> Hier rufe ich die Inkrementierungsfunktion zweimal auf, die Arbeit ist erledigt. Das Interessanteste ist nun, dass Sie zwei Anwendungen separat ausführen können, was bedeutet, dass sie den Status separat verwalten. Ich meine, Sie verstehen, Sie können es überall auf der gesamten Website verwenden, wenn Sie möchten, aber auch hier sind verschiedene Orte unterschiedlich, was bedeutet, dass einer nicht mit dem anderen zusammenhängt. Das ist die Kraft von Reactjs.

Im Grunde teilen Sie React mit, welche Funktionalität Sie haben werden, und React aktualisiert die Benutzeroberfläche automatisch entsprechend. Das ist das Schöne an ReactJS

Worüber reden wir also React? Warum verwenden wir React? Jetzt verstehe ich vollständig, welches Problem React lösen wollte. Solche Fragen können Sie im Interview-Board nicht mehr zurückhalten. Es ist keine leichte Aufgabe, es mit so viel Geduld vollständig zu lesen, Bruder. Du hast es geschafft, viel Glück für dich.

Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonWas ist React und wie funktioniert es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!