3

「ユニバーサル」アプリ (react-router、redux、webpack - 主にhttps://github.com/erikras/react-redux-universal-hot-exampleに基づく) でコード分割の実装を開始しました。

コード分​​割が実装されている (唯一の) ルートで、ブラウザーを完全に更新すると、次の React エラー メッセージが表示されます。

warning.js:44Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) <!-- react-empty: 1 -
 (server) <div class="root" dat

コード分​​割を無効にすると、エラー メッセージは表示されなくなります。これは、Javascript チャンクが Webpack ローダーによって読み込まれる前に React が最初のレンダリングを行ったためであると推測しています。そのため、サーバーで生成されたものとは異なるマークアップが生成されます。あれは正しいですか？

  • エラーメッセージについて心配する必要がありますか?
  • このメッセージが発生した正確な時間に React が何をレンダリングするかを把握する方法はありますか?
  • メッセージを消すための修正はありますか? (コード分割を使用しない以外)
4

2 に答える 2

2

match解決策は、最初のレンダリングを行う前に、react ルーターの関数を呼び出すことです。

https://github.com/reactjs/react-router/issues/2036#issuecomment-225792937およびhttps://github.com/reactjs/react-router/blob/v2.4.1/docs/guides/ServerRendering.mdを参照してください。 #async-routes

于 2016-06-21T00:35:15.070 に答える
0

エラーメッセージについて心配する必要がありますか?

はい、React がマークアップが異なると判断した場合、既存のマークアップの再利用は失敗し、代わりにクライアント レンダーから再生成するため、ブラウザーの作業が増えます。

このメッセージが発生した正確な時間に React が何をレンダリングするかを把握する方法はありますか?

開発ツールで生成されたソースとネットワーク経由で送信された html を比較することで、違いを比較できます。

メッセージを消すための修正はありますか? (コード分割を使用しない以外)

回答で提案したように呼び出すことができmatchます。または、React Router を使用していない場合、またはルーター経由で分割ポイントが設定されていない場合は、必要なすべてのチャンクを前もってロードすることができます。

<!-- index.html -->
<script src="entry.js"></script>
<script src="chunk1.js"></script>
<script>
    // NOTE: Instead of calling render immediately in `entry.js` you would need to define a function on the global to allow you to render the app after the second chunk has loaded.
    window.App.render();
</script>

注: /は常に非同期であるrequire.ensureため、これは使用する場合にのみ機能します。これは、マークアップが最初のレンダリングで依然として異なることを意味します。System.importimport

于 2017-01-07T17:40:46.270 に答える