React同体開発(一)

なぜ同じものを作るのですか?
この質問に答えるには、まず何が同じですか?同じ構成とは、名前を考慮して同じコードであり、クライアント(ブラウザ)で実行したり、サーバー側で実行したりすることができます.
フロントエンドの開発過程において、私たちは一般的にindex.htmlがあり、このファイルにページの基本的な内容(静的な内容)を書き込み、その後JavaScriptスクリプトを導入し、ユーザーの操作に応じてページの内容(データ)を変更することを知っています.性能の最適化については、通常私たちが言っている様々な最適化措置もこの基礎の上で行われます.このモードでは、先端のすべての作業がこのムーの三分割に制限されているようです.
同じ構造が私たちに与えたのはどのような違いですか?上述したように、同一構成モードでは、クライアントのコードもサーバ上で実行することができる.言い換えれば、私達はサーバー側で異なるデータをページにまとめてクライアントに返すことができます.これはページの性能、特にファーストスクリーンの性能に大きな向上をもたらす可能性があります.また、SEOなどにおいても、同構造は極めて便利である.これ以外にも、全体の開発過程において、同構成は前後端のコミュニケーションコストを大幅に低減し、バックエンドは業務モデルに専念し、フロントエンドもページ開発に専念でき、中間のデータ変換はノートの層に任せて実現でき、多くの往復溝のコストを省きました.
Reactによる同体開発
こんなにたくさん話しましたが、どうやって共同開発をしますか?これはまた、Reactが提供したサービス側のレンダリングのおかげです.

ReactDOMServer.renderToString  
ReactDOMServer.renderToStaticMarkup

ReactDom.renderがDOM構造をページにレンダリングするのとは違って、この2つの関数は、仮想DOMをサービング側でレンダリングし、完全なHTML構造を表し、最終的にはhtml形式でクライアントに吐出する.
簡単な例を見ます.

//      
import React, { Component, PropTypes } from 'react';

class News extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        var {data} = this.props;
        return 

      {data.title}
    
;
    }
}

export default News;

私たちはクライアントで、通常は以下のようにこのコンポーネントをレンダリングします.

//            ，  redux 。
let data = {url: 'http://www.taobao.com', title: 'taobao'}
ReactDom.render(, document.getElementById("container"));

この例では、デッドデータを書いていますが、通常は、データを引き出して、プロpsを介してNewsコンポーネントに転送するために、非同期の要求が必要です.この時の書き方はこうです.

Ajax.request({params, success: function(data) {
    ReactDom.render(, document.getElementById("container"));    
}});

この時、非同期の時間はユーザが実際に待つ時間です.
じゃ、同じ構造のモードでは、どうすればいいですか?

//      web       KOA，        controller  
function* newsListController() {
    
  const data = yield this.getNews({params});

  const data = {
    'data': data
  };
  
  this.body = ReactDOMServer.renderToString(News(data));
};

このようにすれば、私はサービス先でページのすべての静的な内容を生成しました.直接的な効果は、スクリーンのデータ要求によるユーザの待ち時間を減らすことです.それ以外にも、JavaScriptを禁止しているブラウザでは、十分なデータ内容を提供することができます.
どういう原理ですか
実は、reactの共同開発は上の例ほど簡単ではありません.上記の例は、サービス側レンダリングとクライアント側レンダリングの基本的な違いを説明するためだけです.実は、適時にすでにサービス端末でページをレンダリングしました.やはりクライアントでReact Dom.render関数を再利用します.いわゆるサービス側のレンダリングとは、静的なページの内容をレンダリングするだけで、何のイベントバインディングもしないからです.すべてのイベントバインディングはクライアントで行われます.クライアントの重複したレンダリングを避けるために、Reactはchecksumのセットを提供する.checksumとは、Reactがサービス端末にレンダリングする際に、コンポーネントに対応するチェックサムを生成し、クライアントReactが同じコンポーネントを処理する時に、サービス端末が生成した初期DOMを多重化して、増分的に更新するという、data-react-checksumの役割です.
だから、最終的には、私たちの構造はこのようなものであるべきです.

// server    
function* newsListController() {
    
  const data = yield this.getNews({params});

  const data = {
    'data': data
  };
  let news = ReactDOMServer.renderToString(News(data));
  this.body = '
\
                      \
                        \
                            \
                        \
                        
' +
                            news +
                            '
var window.__INIT_DATA='+ JSON.stringify(data) +'\
                        \
                      ';
};

//    ，app.js   
let data = JSON.parse(window.__INIT_DATA__);  
ReactDom.render(, document.getElementById("container"));

び
ずっと じ の しているものをしています. では にreactの の と について しています. アプリケーションの については、nodeアプリケーションのリリース、 、ログ 、reactコンポーネントが の などを うことが い.これらのことは から ずつします.その も と をします.
:https://www.cnblogs.com/bingooo/p/5724354.html