React in modernen Webanwendungen: Teil 2

Wie in Teil 1 dieser Serie erwähnt, ist React eine hervorragende Javascript-Bibliothek zum Schreiben hochdynamischer clientseitiger Komponenten. React ist jedoch nicht als vollständiges MVC-Framework gedacht. Seine Stärke ist der View-Teil des Model-View-Controller-Musters. AngularJS ist eines der bekanntesten und leistungsfähigsten Javascript MVC-Frameworks. Eines der Ziele des Kurses war es, zu zeigen, wie Sie React mit AngularJS integrieren können.

Integration von React mit AngularJS

Entwickler können mit Hilfe von Direktiven wiederverwendbare Komponenten in AngularJS erstellen. Direktiven sind sehr leistungsfähig, aber auch komplex und der Code wird schnell unübersichtlich und schwer zu pflegen. Daher ist das Ersetzen des Direktiveninhalts in Ihrer AngularJS-Anwendung durch React-Komponenten ein ausgezeichneter Anwendungsfall für React. In diesem Kurs haben wir eine Timesheet-Komponente in React erstellt. Um sie mit AngularJS zu verwenden, erstellen Sie eine Direktive, die die WeekEntryComponent lädt: [javascript] angular.module('timesheet') .directive('weekEntry', function () { return { restrict: 'A', link: function (scope, element) { React.renderComponent(new WeekEntryComponent({ scope.companies, scope.model})), element.find('#weekEntry')[0]); [/javascript] } }; }); wie Sie sehen können, ein einfaches Stück Code. Da es sich um AngularJS-Code handelt, ziehe ich es vor, JSX nicht zu verwenden und den React-spezifischen Code in einfachem Javascript zu schreiben. Wenn Sie es jedoch vorziehen, können Sie die JSX-Syntax verwenden (vergessen Sie nicht, die Direktive am Anfang der Datei hinzuzufügen!). Wir erstellen im Grunde eine Komponente und rendern sie auf dem Element mit der Id weekentry. Wir übergeben zwei Werte aus dem Geltungsbereich der Direktive als Eigenschaften an die WeekEntryComponent. Die Komponente wird basierend auf den übergebenen Werten gerendert.

Reagieren auf Änderungen in AngularJS

Der oben gezeigte Code hat jedoch einen fatalen Fehler: Die Komponente wird nicht neu gerendert, wenn sich die Unternehmen oder Modellwerte im Geltungsbereich der Direktive ändern. Der Grund dafür ist einfach: React weiß nicht, dass diese Werte dynamisch sind, und die Komponente wird einmal gerendert, wenn die Direktive initialisiert wird. React rendert eine Komponente nur in zwei Situationen neu:

• Wenn sich der Wert einer Eigenschaft ändert: Dies ermöglicht es den übergeordneten Komponenten, die Neudarstellung der untergeordneten Komponenten zu erzwingen.
• Wenn sich das Zustandsobjekt einer Komponente ändert: Eine Komponente kann ein Zustandsobjekt erstellen und es ändern

Der Zustand sollte auf ein Minimum beschränkt sein und sich vorzugsweise in nur einer Komponente befinden. Die meisten Komponenten sollten zustandslos sein. Das sorgt für einfacheren, leichter zu wartenden Code.Um die Interaktion zwischen AngularJS und React dynamisch zu gestalten, muss die WeekEntryComponent von AngularJS explizit neu gerendert werden, wenn sich ein Wert im Geltungsbereich ändert. AngularJS stellt dafür die Funktion watch zur Verfügung: [javascript] angular.module('timesheet') .directive('weekEntry', function () { zurück { einschränken: 'A', link: function (scope, element) { scope.$watchCollection('[clients, model]', function (newData) { if (newData[0] !== undefined && newData[1] !== undefined) { React.renderComponent(new WeekEntryComponent({ rows: newData[1].companies, Kunden: newData[0] } ), element.find('#weekEntry')[0]); } }); } }; }); [/javascript] In diesem Code überwacht AngularJS zwei Werte im Bereich, Clients und Model, und wenn einer der Werte durch eine Benutzeraktion geändert wird, wird die Funktion aufgerufen und die React-Komponente nur dann neu gerendert, wenn beide Werte definiert sind. Wenn der größte Teil des Bereichs von AngularJS benötigt wird, ist es besser, den gesamten Bereich als Eigenschaft zu übergeben und den Bereich selbst mit einer Watch zu versehen. Denken Sie daran, dass React sehr schlau ist, was das erneute Rendern im Browser angeht. Nur wenn eine Änderung in den Bereichseigenschaften zu einer echten Änderung im DOM führt, wird der Browser aktualisiert!

Zugriff auf AngularJS-Code von React aus

Wenn Ihre Komponente eine in AngularJS definierte Funktionalität nutzen muss, müssen Sie einen Funktionsrückruf verwenden. In unserem Code zum Beispiel wird das Speichern des Stundenzettels von AngularJS verwaltet, während die Schaltfläche Speichern von React verwaltet wird. Wir haben das Problem gelöst, indem wir eine Funktion saveTimesheet erstellt und sie in den Geltungsbereich der Direktive aufgenommen haben. In der WeekEntryComponent haben wir eine neue Eigenschaft hinzugefügt: saveMethod: [javascript] angular.module('timesheet') .directive('weekEntry', function () { zurück { einschränken: 'A', link: function (scope, element) { scope.$watchCollection('[clients, model]', function (newData) { if (newData[0] !== undefined && newData[1] !== undefined) { React.renderComponent(WeekEntryComponent({ rows: newData[1].companies, clients: newData[0], saveMethod: scope.saveTimesheet }), element.find('#weekEntry')[0]); } }); } }; }); [/javascript] Da diese Funktion nicht geändert wird, muss sie nicht überwacht werden. Immer wenn die Schaltfläche Speichern in der TimeSheetComponent angeklickt wird, wird die Funktion saveTimesheet aufgerufen und der neue Zustand des Stundenzettels gespeichert.

Was kommt als Nächstes?

Im nächsten Teil werden wir uns ansehen, wie Sie mit Zuständen in Ihren Komponenten umgehen und wie Sie vermeiden können, dass bei Zustandsänderungen Rückrufe durch Ihre gesamte Komponentenhierarchie laufen.