React Reduxサーバー側でクライアントに再レンダリングされました

Question

reduxのofficial siteで説明されている方法でサーバー側のレンダリングを作成しましたが、すべてが素晴らしいですが、クライアント側ではコンポーネントを再度レンダリングしています。私はサーバから同じ状態を変数window.__STATE__に渡しており、これをクライアント側にcreateStoreメソッドを初期状態として渡しますが、再びそれを再レンダリングします。もしそうなら、コードのどの部分があなたに必要なのかをコメントに書いてください。 正式なページの命令コードと非常に似ていてエラーがなく、再レンダリングで問題が発生するだけで、仮想DOMに接続していないとわかっているので、私は提供していません。

このタスクを処理する有効な方法を見つけるのを手伝ってください。

Answer 1

はReactGoプロジェクトからこの例を見てみましょう：https://github.com/reactGo/reactGo/blob/master/app/client.jsx#L22

彼らは__INITIAL_STATE__がすでに定義されている場合、重複がフェッチ防止条件

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

を持つ関数onUpdateを使用しています。再レンダリングするコンポーネントは、重複フェッチとは関係があります。

Answer 2

おそらく、再レンダリングの意味を理解していないかもしれませんが、クライアント上でもう一度「再レンダリング」することになっています。同形的なやり方は、HTMLをサーバー上にレンダリングし、ペイロードにも初期状態が含まれていて、HTMLマークアップがあるということです。これにより、UIが以前にレンダリングされているためスクリプトが実行されます。 HTMLが解析され、スクリプトが実行されると、Reactは内部的に仮想DOMを構築し、それをサーバー生成DOMと比較してイベントリスナーなどをワイヤリングします。しかし、新しいDOM要素がない作成される。何らかの理由でクライアントがあなたのReactレンダリングを実行すると、生成されたサーバーDOMとは異なる仮想DOMが生成された場合、Reactは警告を出します。

「警告：コンテナ内のマークアップを再利用しようとしましたが、 チェックサムが無効でした。これは、一般的には、サーバー レンダリングを使用していることを意味し、サーバー上で生成されたマークアップが クライアントが期待していたものではありませんでした反応。 作品を補償するために注入された新しいマークアップを反応させていますが、サーバーレンダリングの利点の多くを失っている 代わりに、生成されるマークアップは クライアントまたはサーバー上で異なる理由を把握：再と」