19

私は ReactJS に比較的慣れていないので、「最初のツイートまでの時間」を短縮するためにサーバー側のレンダリングを簡単に実装できることに魅了されました。React の renderComponentToString を使用してサーバー上でマークアップを事前レンダリングする Node-Express-React スタックを実行しています。

コンポーネントを同期的にレンダリングできる場合は問題なく動作しますが、ajax を使用したコンポーネントの実装に関しては苦労しています (ただし、これはコンポーネントの初期化中の非同期操作 (websocket など) に適用されます)。

React Web サイトの例を見てみましょう: http://facebook.github.io/react/tips/initial-ajax.html

componentDidMount: function() {
 $.get(this.props.source, function(result) {
  var lastGist = result[0];
  this.setState({
    username: lastGist.user.login,
    lastGistUrl: lastGist.html_url
  });
}.bind(this));

renderComponentToString を使用すると componentDidMount がトリガーされないため、サーバーでは機能しません。この単純なケースは、(jQuery の $.get を使用する代わりに) クライアントとサーバーで同じ HTTP リクエスト ラッパーを使用し、コンポーネントをインスタンス化して prop として渡す前にデータをプリフェッチすることで回避できます。

ただし、実際の複雑なアプリでは、非同期の依存関係が非常に複雑になる可能性があり、プリフェッチは React 構造を構築する子孫のアプローチにはあまり適していません。実際に何もマウントせずにサーバー上でレンダリングできる非同期初期化パターンを React に実装するにはどうすればよいですか (つまり、PhantomJS のような DOM エミュレーションはありません。これが renderComponentToString を使用することの要点です)。

4

3 に答える 3

3

サーバーレンダリングの例を使用して出荷するreact-quickstartプロジェクトを見ることができます。非同期状態をプリフェッチし、それを初期マークアップにレンダリングする装飾メソッドを提供します。ただし、「通常の」状態とは別に非同期状態を指定する必要があります。react-asyncreact-asyncrenderComponentToString

于 2014-05-07T03:04:58.353 に答える
0

すべての非同期依存関係を事前に宣言するのに役立つreact-nexus ( https://github.com/elierotenberg/react-nexus ) を確認できます。

しかし、react-nexus はこの問題に対するあなた自身の答えであることを認識しているので、おそらくすでに見つけているでしょう。

于 2016-07-04T10:25:28.450 に答える