Die Zukunft von React ist kein weiterer State Manager

Dan Abramov hat großartige UX-Verbesserungen für React vorgestellt, aber keinen neuen Ansatz für die Zustandsverwaltung. Es gab einige Verwirrung darüber, dass die gezeigte deklarative Datenabfrage eine Alternative zu Redux sei. Die Verwirrung wurde hauptsächlich durch einen Artikel verursacht, in dem es hieß, dass die "Future Fetcher API" Redux ersetzt habe. Der Artikel zitierte einen Tweet von Kent C. Dodds, der als Scherz gemeint war.

[embed]https://twitter.com/kentcdodds/status/969256012632018944[/embed]

Dan hat demonstriert, wie React durch asynchrones Rendering ein besseres Benutzererlebnis bietet. React wird den Haupt-JS-Thread nicht mehr blockieren, wenn teure DOM-Operationen durchgeführt werden. Es kann dem Rendering wichtiger Aktualisierungen Vorrang vor weniger wichtigen Aktualisierungen einräumen. Das bedeutet, dass Aktualisierungen, die durch Benutzerinteraktionen verursacht werden, vor anderen Aktualisierungen ausgeführt werden. Ich empfehle Ihnen, sich die Demo anzusehen.Dieser Ansatz kann auch genutzt werden, um das Rendering zu unterbrechen, wenn Sie auf IO-Operationen warten. In seinem Vortrag hat Dan gezeigt, wie Sie das Rendering durch die Verwendung von innerhalb der Rendering-Schleife aussetzen können. Das kann wie ein neuer Ansatz für die Zustandsverwaltung aussehen, aber es wurde nur gezeigt, wie Sie das Rendering auch in Ihrem eigenen Code anhalten können. Der Code für die Demo verwendete setState, um zu speichern, welcher Film angeklickt wurde. Das Abrufen der Daten erfolgte durch einen normalen Fetch-Aufruf. Die Methode createFetcher von ../future war nur eine Möglichkeit, eine Funktion zu zwischenspeichern, die eine Promise zurückgibt. Sie unterbricht auch das Rendering von React, solange die Promise anhängig ist. In diesem Thread finden Sie weitere Details zum Cache:

[embed]https://twitter.com/acdlite/status/969168681644179456[/embed]

Das Abrufen von Daten aus dem Zwischenspeicher ist in React bereits möglich. Verwenden Sie eine Komponente wie react-promise. Intern nutzt react-promise auch die Funktion setState. [gist id="6fd6662e1e299981b9d35b8169d57cc8"] Dies ist kein vollständiger Zustandsverwaltungsansatz, sondern nur eine Möglichkeit, deklarative Daten abzurufen. Das deklarative Abrufen von Daten bietet Ihnen eine schöne Abstraktion, um den Lade-, Fehler- und Antwortstatus eines Ajax-Aufrufs anzuzeigen, aber es erlaubt Ihnen nicht, Benutzereingaben zu speichern. Das Zwischenspeichern der Ajax-Aufrufe in einem globalen Cache ist eine schöne Ergänzung, die es ermöglicht, dieselben Serverdaten in der gesamten Anwendung wiederzuverwenden. Sie könnten dies selbst implementieren. Sie könnten sogar die browsereigene Zwischenspeicherung von Antworten nutzen oder die Cache-API in einem Service Worker verwenden. Das ist jedoch nichts Neues.Insgesamt bin ich von den neuen UX-Verbesserungen in React begeistert. Weniger erfreut bin ich über die Abstriche bei der Zustandsverwaltung.