beidou-plugin-view-react

v0.0.1

Published

4 years ago

beidou react view

Downloads

0High
0Medium
0Low

weichunpeng

北斗 react view

基于egg 的 react view.

1. 使用说明

配置插件

config/plugin.js:

exports.view = {
  enable: true,
  package: '@ali/beidou-plugin-view-react',
};

config/config.default.js

exports.view = {
  extname: 'jsx' // 选填，文件后缀
  beautify: false // 选填，是否格式化 HTML
  cache: true, // 选填，是否开启缓存，默认为false
  loadPath: `${antx.baseDir}/app/views`, // 选填，View 本地文件路径
  clientPath: `${antx.baseDir}/client`,  // 选填，客户端组件的文件路径
  internals: true, // 选填，true: renderToString 或 false: renderToStaticMarkup, 默认true
  doctype: '<!DOCTYPE html>', // 选填，DOC 头
  cdnRoot: '', // 选填，客户端静态资源的 cdn 根路径，比如： /tp/refund/0.0.1/ 
}

特别说明

在北斗应用中，我们推荐app/views目录下的页面都使用 react 组件来写，因此在view执行render方法时，会renderToString两次，

具体示例参考 demo 和插件内部实现

view中渲染的实际上是最外层的页面内容，因此在最终生成页面的时候，会多计算一次checksum，如图：

_E7_B2_98_E8_B4_B4_E5_9B_BE_E7_89_87

而这个checksum是完全多余的，且checksum的计算会比较耗时，处于性能考虑，建议将internals配置为false.

view 插件在 render 组件的时候，会向被 render 的组件传入 helper 对象，该对象继承自 app.Helper，内部封装了一些工具函数供组件内部使用。

服务端渲染视图模板

// app/controller/home.js  
exprots.index = function*() {  
  yield this.render('path/to/index.jsx', {  
    user: 'egg view'  
  });  
};

2. 规范

根据Web规范 view相关约定, 提供render 和 renderString两个接口, 返回Promise.

ctx.render(name, locals) - 渲染模板文件, 并赋值给 ctx.body
ctx.renderString(tpl, locals) - 渲染模板字符串, 仅返回不赋值

3. egg内部机制

egg 内部的实现机制如下：

通过 app[Symbol.for('egg#view')] 获取到 View 基类
egg 将继承该基类，并挂载到 app.View ，该子类对 render 等方法添加通用处理，如全局 locals 注入。
每一个用户请求，都实例化一个 app.View 实例，并挂载到 ctx.view 上
在 controller 中可以调用 this.render 进行模板渲染，即 ctx.view.render

Contributors(2)

Ordered by date of first contribution, by ali-contributors.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme