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!