0.0.1 • Published 7 years ago
beidou-plugin-view-react v0.0.1
北斗 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两次，
view中渲染的实际上是最外层的页面内容，因此在最终生成页面的时候，会多计算一次checksum，如图：
而这个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.
0.0.1
7 years ago