React 同构实践与思考
|
众所周知，目前的 WEB 应用，用户体验要求越来越高，WEB 交互变得越来越丰富！前端可以做的事越来越多，去年 Node 引领了前后端分层的浪潮，而 React 的出现让分层思想可以更多彻底的执行，尤其是 React 同构 (Universal or Isomorphic) 这个黑科技到底是怎么实现的，我们来一探究竟。 React 服务端方法如果熟悉 React 开发，那么一定对 现有的任何开发模式都离不开 DOM 树，如图： 服务端渲染就要稍作改动，如图： 比较两张图可以看出，服务端渲染需要把 React 的初次渲染放到服务端，让 React 帮我们把业务 component 翻译成 string 类型的 DOM 树，再通过后端语言的 IO 流输出至浏览器。 我们来看 React 官方给我们提供的服务端渲染的API：
配合 React 玩转 Node有了解决方案，我们就可以动手在 Node 来做一些事了。后面会利用 KOA 这个 Node 框架来做实践。 我们新建应用，目录结构如下， react-server-koa-simple ├── app │ ├── assets │ │ ├── build │ │ ├── src │ │ │ ├── img │ │ │ ├── js │ │ │ └── css │ │ ├── package.json │ │ └── webpack.config.js │ ├── middleware │ │ └── static.js（前端静态资源托管中间件） │ ├── plugin │ │ └── reactview（reactview 插件） │ └── views │ ├── layout │ │ └── Default.js │ ├── Device.js │ └── Home.js ├── .babelrc ├── .gitgnore ├── app.js ├── package.json └── README.md 首先，我们需要实现一个 KOA 插件，用来实现 React 作为服务端模板的渲染工作，方法是将 /*
* koa-react-view.js
* 提供 react server render 功能
* {
* options : {
* viewpath: viewpath,// the root directory of view files
* doctype: '<!DOCTYPE html>',* extname: '.js',// view层直接渲染文件名后缀
* writeResp: true,// 是否需要在view层直接输出
* }
* }
*/
module.exports = function(app) {
const opts = app.config.reactview || {};
assert(opts && opts.viewpath && util.isString(opts.viewpath),'[reactview] viewpath is required,please check config!');
const options = Object.assign({},defaultOpts,opts);
app.context.render = function(filename,_locals,children) {
let filepath = path.join(options.viewpath,filename);
let render = opts.internals
? ReactDOMServer.renderToString
: ReactDOMServer.renderToStaticMarkup;
// merge koa state
let props = Object.assign({},this.state,_locals);
let markup = options.doctype || '<!DOCTYPE html>';
try {
let component = require(filepath);
// Transpiled ES6 may export components as { default: Component }
component = component.default || component;
markup += render(React.createElement(component,children));
} catch (err) {
err.code = 'REACT';
throw err;
}
if (options.writeResp) {
this.type = 'html';
this.body = markup;
}
return markup;
};
};
然后，我们来写用 React 实现的服务端的 Components， /*
* react-server-koa-simple - app/views/Home.js
* home模板
*/
render() {
let { microdata,mydata } = this.props;
let homeJs = `${microdata.styleDomain}/build/${microdata.styleVersion}/js/home.js`;
let scriptUrls = [homeJs];
return (
<Default
microdata={microdata}
scriptUrls={scriptUrls}
title={"demo"}>
<div id="demoApp"
data-microdata={JSON.stringify(microdata)}
data-mydata={JSON.stringify(mydata)}>
<Content mydata={mydata} microdata={microdata} />
</div>
</Default>
);
}
这里做了几件事，初始化 DOM 树，用 data 属性作服务端数据埋点，渲染前后端公共 Content 模块，引用前端模块 而客户端，我们就可以很方便地拿到了服务端的数据，可以直接拿来使用， import ReactDOM from 'react-dom';
import Content from './components/Content.js';
const microdata = JSON.parse(appEle.getAttribute('data-microdata'));
const mydata = JSON.parse(appEle.getAttribute('data-mydata'));
ReactDOM.render(
<Content mydata={mydata} microdata={microdata} />,document.getElementById('demoApp')
);
然后，到了启动一个简单的 koa 应用的时候，完善入口 app.js 来验证我们的想法， const koa = require('koa');
const koaRouter = require('koa-router');
const path = require('path');
const reactview = require('./app/plugin/reactview/app.js');
const Static = require('./app/middleware/static.js');
const App = ()=> {
let app = koa();
let router = koaRouter();
// 初始化 /home 路由 dispatch 的 generator
router.get('/home',function*() {
// 执行view插件
this.body = this.render('Home',{
microdata: {
domain: "//localhost:3000"
},mydata: {
nick: 'server render body'
}
});
});
app.use(router.routes()).use(router.allowedMethods());
// 注入 reactview
const viewpath = path.join(__dirname,'app/views');
app.config = {
reactview: {
viewpath: viewpath,// the root directory of view files
doctype: '<!DOCTYPE html>',extname: '.js',// view层直接渲染文件名后缀
beautify: true,// 是否需要对dom结构进行格式化
writeResp: false,// 是否需要在view层直接输出
}
}
reactview(app);
return app;
};
const createApp = ()=> {
const app = App();
// http服务端口监听
app.listen(3000,()=> {
console.log('3000 is listening!');
});
return app;
};
createApp();
现在，访问上面预先设置好的路由，http://localhost:3000/home 来验证 server render，
react-router 和 koa-router 统一我们已经建立了服务端渲染的基础了，接着再考虑下如何把后端和前端的路由做统一。 假设我们的路由设置成 // 初始化 device/:deviceID 路由 dispatch 的 generator
router.get('/device/:deviceID',function*() {
// 执行view插件
let deviceID = this.params.deviceID;
this.body = this.render('Device',{
isServer: true,microdata: microdata,mydata: {
path: this.path,deviceID: deviceID,}
});
});
以及服务端 View 模板， render() {
const { microdata,mydata,isServer } = this.props;
const deviceJs = `${microdata.styleDomain}/build/${microdata.styleVersion}/js/device.js`;
const scriptUrls = [deviceJs];
return (
<Default
microdata={microdata}
scriptUrls={scriptUrls}
title={"demo"}>
<div id="demoApp"
data-microdata={JSON.stringify(microdata)}
data-mydata={JSON.stringify(mydata)}>
<Iso
microdata={microdata}
mydata={mydata}
isServer={isServer}
/>
</div>
</Default>
);
}
前端 app 入口：app.js function getServerData(key) {
return JSON.parse(appEle.getAttribute(`data-${key}`));
};
// 从服务端埋点处 <div id="demoApp"> 获取 microdata,mydata
let microdata = getServerData('microdata');
let mydata = getServerData('mydata');
ReactDOM.render(
<Iso microdata={microdata} mydata={mydata} isServer={false} />,document.getElementById('demoApp'));
前后端公用的 Iso.js 模块，前端路由同样设置成 class Iso extends Component {
static propTypes = {
// ...
};
// 包裹 Route 的 Component，目的是注入服务端传入的 props
wrapComponent(Component) {
const { microdata,mydata } = this.props;
return React.createClass({
render() {
return React.createElement(Component,{
microdata: microdata,mydata: mydata
},this.props.children);
}
});
}
// LayoutView 为路由的布局; DeviceView 为参数处理模块
render() {
const { isServer,mydata } = this.props;
return (
<Router history={isServer ? createMemoryHistory(mydata.path || '/') : browserHistory}>
<Route path="/"
component={this.wrapComponent(LayoutView)}>
<IndexRoute component={this.wrapComponent(DeviceView)} />
<Route path="/device/:deviceID" component={DeviceView} />
</Route>
</Router>
);
}
}
这样我就实现了服务端和前端路由的同构！ 无论你是初次访问这些资源路径： 其中注意几点：
propTypes: {
path: string,component: _PropTypes.component,components: _PropTypes.components,getComponent: func,getComponents: func
},
为什么服务端获取数据不和前端保持一致，在 Component 里作数据绑定，使用 fetchData 和数据绑定！只能说，你可以大胆的假设。接下来就是我们要继续探讨的同构model！ 同构数据处理的探讨我们都知道，浏览器端获取数据需要发起 ajax 请求，实际上发起的请求 URL 就是对应服务端一个路由控制器。 React 是有生命周期的，官方给我们指出的绑定 Model，fetchData 应该在 而服务端处理数据是线性的，是不可逆的，发起请求 > 去数据库获取数据 > 业务逻辑处理 > 组装成 html-> IO流输出给浏览器。显然，服务端和浏览器端是矛盾的！ 实验的方案你或许会想到利用 /**
* An object containing properties and methods that should be defined on
* the component's constructor instead of its prototype (static methods).
*
* @type {object}
* @optional
*/
statics: SpecPolicy.DEFINE_MANY,
利用 statics 把我们的组件扩展成这样， class ContentView extends Component {
statics: {
fetchData: function (callback) {
ContentData.fetch().then((data)=> {
callback(data);
});
}
};
// 浏览器端这样获取数据
componentDidMount() {
this.constructor.fetchData((data)=> {
this.setState({
data: data
});
});
}
...
});
ContentData.fetch() 需要实现两套：
服务端调用： require('ContentView').fetchData((data)=> {
this.body = this.render('Device',mydata: data
});
});
这样可以解决数据层的同构！但我并不认为这是一个好的方法，好像回到 JSP 时代。 我们团队现在使用的方法： 参考资料本文完整运行的 例子
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |