java与react整合_[Java教程]React直出实现与原理

[Java教程]React直出实现与原理

0 2015-05-31 00:00:18 前一篇文章我们介绍了虚拟DOM的实现与原理，这篇文章我们来讲讲React的直出。 比起MVVM，React比较容易实现直出，那么React的直出是如何实现，有什么值得我们学习的呢？

为什么MVVM不能做直出？

对于MVVM，HTML片段即为配置，而直出后的HTML无法还原配置，所以问题不是MVVM能否直出，而是在于直出后的片段能否还原原来的配置。下面是一个简单的例子：Hello {name}!

上面这段HTML配置和数据在一起，直出后会变成：Hello world!

这时候当我们失去了name的值改变的时候会导致页面渲染这个细节。当然，如果为了实现MVVM直出我们可能有另外的方法来解决，例如直出结果变成这样：Hello world!

这时候我们是可以把丢失的信息找回来的，当然结构可能和我们想象的有些差别。当然还有其他问题，例如直出HTML不一定能反向还原数据，由于篇幅问题，这里不展开讨论。

React如何直出？

如图：React的虚拟DOM的生成是可以在任何支持Javascript的环境生成的，所以可以在NodeJS或Iojs环境生成

虚拟DOM可以直接转成String

然后插入到html文件中输出给浏览器便可

具体例子可以参考，https://github.com/DavidWells/isomorphic-react-example/，下面是其渲染路由的写法：// https://github.com/DavidWells/isomorphic-react-example/blob/master/app/routes/coreRoutes.jsvar React = require('react/addons');var ReactApp = React.createFactory(require('../components/ReactApp').ReactApp);module.exports = function(app) { app.get('/', function(req, res){ // React.renderToString takes your component // and generates the markup var reactHtml = React.renderT