Reagieren Redux Server Seite gerendert erneut auf Client erneut

Question

Ich erstellte Server Side-Rendering mit Ansatz beschrieben in Redux official site, alles ist toll, aber auf der Client-Seite es Rendering-Komponenten wieder, und das ist nicht gut, denke ich. Ich übergebe den gleichen Status vom Server an window.__STATE__ Variable und übergebe dies an meine Client-Seite createStore Methode als Ausgangszustand, aber es erneut Rendern. Bitte schreiben Sie auch in Kommentare, welcher Teil des Codes für Sie benötigt wird. Ich biete nicht, da es sehr ähnlich zu offiziellen Anweisungen Code ist und es keine Fehler gibt, nur Problem mit der Neuausgabe, aber wie ich verstehe, ist es keine Verbindung zu virtuellen DOM.

Bitte helfen Sie mir einen gültigen Weg zur Bewältigung dieser Aufgabe zu finden.

Answer 1

Werfen Sie einen Blick auf dieses Beispiel aus dem ReactGo Projekt: https://github.com/reactGo/reactGo/blob/master/app/client.jsx#L22

Sie verwenden eine Funktion onUpdate, die die bedingte

if (window.__INITIAL_STATE__ !== null) { 
    window.__INITIAL_STATE__ = null; 
    return; 
    } 

, die ein Duplikat wenn holt verhindert hat, ist __INITIAL_STATE__ bereits definiert. Ihre neu zu rendernden Komponenten haben möglicherweise etwas mit dem doppelten Abrufen zu tun.

Answer 2

Vielleicht verstehe ich nicht, was Sie mit dem Rendern meinen, aber es soll wieder auf dem Client "rendern". Der Weg isomorphe funktioniert ist, dass es den HTML-Code auf dem Server rendert, und die Nutzlast enthält den Anfangszustand sowie das HTML-Markup - auf diese Weise scheint der Browser schnellere Ladezeiten der Seite zu haben - da die UI schon vorher gerendert wurde Das Skript wird ausgeführt. Jetzt, nachdem der HTML-Code analysiert und das Skript ausgeführt wurde, erstellt React intern das virtuelle DOM und vergleicht es dann mit dem vom Server generierten DOM und verdrahtet Event-Listener usw. Es wird jedoch kein vollständiges Rendering durchgeführt, da keine neuen DOM-Elemente sollten erstellt werden. Wenn aus irgendeinem Grund die Client-Ausführung Ihrer React-Renderergebnisse in einem virtuellen DOM erfolgt, das sich vom generierten Server-DOM unterscheidet, gibt Ihnen React eine Warnung.

„. Achtung: versucht React Markup in einem Behälter wieder zu verwenden, aber die Prüfsumme ungültig Dies bedeutet im Allgemeinen, dass Sie auf dem Server Server Rendering und das Markup generiert werden, indem nicht, was der Client erwartet hat. reagieren injizierte neuen Markup zu kompensieren, welche funktioniert, aber Sie viele der Vorteile von Server-Rendering verloren haben Stattdessen herauszufinden, warum das Markup ist anders auf dem Client oder Server generiert wird.“