React Render 初始化辅助代码

  • ${root}/app/web/framework/app.tsx
  1. import React, { Component } from 'react';
  2. import ReactDOM from 'react-dom';
  3. // 热更新
  4. import { AppContainer } from 'react-hot-loader';
  6. const clientRender = (Com, method) => {
  7.   const state = window.__INITIAL_STATE__;
  8.   const root = document.getElementById('app');
  9.   // Webpack 注入的静态变量，EASY_ENV_IS_DEV 开发模式
  10.   if (EASY_ENV_IS_DEV) {
  11.     ReactDOM[method](<AppContainer><Com {...state} /></AppContainer>, root);
  12.     if (module.hot) {
  13.       module.hot.accept();
  14.     }
  15.   } else{
  16.     ReactDOM[method](<Com {...state} />, root);
  17.   }
  18. };
  20. const serverRender = Com => {
  21.   return Com;
  22. };
  24. export function SSR(Com) {
  25.   return EASY_ENV_IS_NODE ?  serverRender(Com) : clientRender(Com, 'hydrate');
  26. }
  28. export function CSR(Com) {
  29.   return clientRender(Com, 'render');
  30. }

React SSR Layout Component

  • ${root}/app/web/component/layout.tsx

import React, { Component } from 'react';
export default class Layout extends Component<any> {
  render() {
    if(EASY_ENV_IS_NODE) {
      return <html>
        <head>
          <title>{this.props.title}</title>
          <meta charSet="utf-8"></meta>
          <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"></meta>
          <meta name="keywords" content={this.props.keywords}></meta>
          <meta name="description" content={this.props.description}></meta>
          <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"></link>
        </head>
        <body><div id="app">{this.props.children}</div></body>
      </html>;
    }
    return this.props.children;
  }
}