3

Reactjs を使用した同形アプリケーションでは、サーバーでレンダリングされたのと同じ初期状態をクライアントに渡す必要があります (これにより、イベント バインディングなどでアプリが「再水和」されます)。

この初期状態を下に渡すための 2 つのアプローチを見てきました。

ウィンドウにグローバル変数を設定する:

<script>
window.initialState = {{JSON.stringify(initialState)}} ;
</script>

または、JSON オブジェクトとして渡します。

<script id="initial-state" type="application/json"> {{JSON.stringify(initialState)}}</script>

どちらも、アプリケーションのどこからでも簡単に取得できます。一方を他方よりも使用する利点はありますか？

4

2 に答える 2

6

後者はグローバル変数を回避し、前者は DOM ルックアップを回避します。必要なコードが少ないという理由だけで、前者を使用します。

</script懸念事項の 1 つは、JSON にインジェクションや偶発的なエラーが発生する可能性がある場合です。これを防ぐには、 に置き換えることができ<ます\u003c。

<script>
window.initialState = {{
    JSON.stringify(initialState).replace(/</g, '\\u003c')
}}; 
</script>
于 2014-12-27T18:33:34.440 に答える
1

私は、サーバーとブラウザーで物事を開始する開始関数を作成するのが好きです。ブラウザー側では、その初期状態オブジェクトを引数としてレンダリングします。

<script type="text/javascript">
    var app = new App();
    document.addEventListener('DOMContentLoaded', function(e) {
        document.removeEventListener('DOMContentLoaded');

        app.start({{JSON.stringify(initialState)}});
    });
</script>

start 関数には、ブラウザ用に次のようなものがあります。

App.prototype.start = function(initState) {
    React.render(RootComponent(initState), document.getElementById('container'));
}

この場合、start() はあまり機能しませんが、完全な実装では、ここでサーバー側のレンダリングも処理します。これに関する私のアイデアのほとんどは、この講演と例から生まれました: https://github.com/zertosh/ssr-demo-kit

于 2014-12-28T15:29:36.110 に答える