React Render 初始化辅助代码

  • ${root}/app/web/framework/app.tsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
// 热更新
import { AppContainer } from 'react-hot-loader';

const clientRender = (Com, method) => {
  const state = window.__INITIAL_STATE__;
  const root = document.getElementById('app');
  // Webpack 注入的静态变量,EASY_ENV_IS_DEV 开发模式
  if (EASY_ENV_IS_DEV) {
    ReactDOM[method](<AppContainer><Com {...state} /></AppContainer>, root);
    if (module.hot) {
      module.hot.accept();
    }
  } else{
    ReactDOM[method](<Com {...state} />, root);
  }
};

const serverRender = Com => {
  return Com;
};

export function SSR(Com) {
  return EASY_ENV_IS_NODE ?  serverRender(Com) : clientRender(Com, 'hydrate');
}

export function CSR(Com) {
  return clientRender(Com, 'render');
}

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;
  }
}

Author: sky
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source sky !
 Previous
客户端渲染(CSR) 客户端渲染(CSR)
React Node 端代码实现服务端只渲染 HTML 的 HTML,HEAD,BODY 标签结构,具体 BODY 内容由 ctx.renderClient 进行 React 客户端渲染; 文件名为 webpack entry 的文件名,注入的页面 JS 文件为 app/public 文件。$...
2019-12-23 sky
Next 
框架介绍 框架介绍
res -- Node React Application Web FrameworkGitHub:https://github.com/easy-team/res框架特性Node 端基于 Egg 开发,遵循 Egg 开发规范和 Egg 生态,支持 Egg 所有特性,比如插件机制,多进程机制...
2019-12-23 sky