结合反应和玉石
我正在与快递+反应工作的同构javascript应用程序。 我们开始使用翡翠作为静态内容的服务器端模板，但是将这两者结合起来很快变得笨拙。 我们结束了这样的事情：
在快递路线：
router.get("/", function(req, res) { var webpackStats = require('../../config/webpack-stats.json'); var reactHtml = React.renderToString(HiwApp({})); var slideshowHtml = React.renderToString(slideshowApp({})); var config = { webpackStats: webpackStats, reactOutput: reactHtml, slideshowHtml: slideshowHtml }; res.render("how_it_works/howitworks", config); }); 在玉：
body .company-logo.center #react-main-mount != reactOutput include ./content_block_1.jade include ./content_block_2.jade #slideshow-main-mount != slideshowHtml
这是非常脆弱的 – 如果我们想要jsx，那么需要更多的jsx模板，我们必须确保我们的订单正确。
我的想法是用jsx做这一切 。 我知道有这样的事情React.renderToStaticMarkup，但是这并不能解决静态页面混合dynamic的问题。
大问题：如果我们决定用jsx（包含所有组件的React.renderToString(App({}); ）来做所有这些事情，那么调用React.renderToString(App({});这会是一个主要的性能问题吗？有更好的方法来做到这一点，轻松地结合静态和dynamic块？
虽然这可能是一个微不足道的话题： 我们坚持与玉模板。
基本上，我们希望在出现需求时能够灵活地使用无反应+通量架构的网站区域。 我们的网站基本上由一些较小的SP应用程序组成：网站，UserAccount，团队和pipe理员。
我们为什么这样做？
-
较小的文件大小和用户谁不访问网站的所有部分的开销。
-
select“退出”反应和stream量，如果需要时。
-
更简单的服务器端身份validation。
我们成功完成的方式是使用React.renderToStaticMarkup()在服务器上呈现JSXshell模板（ Html.jsx ），然后将其作为对每个服务器端快速路由请求的响应发送，以便传递一些HTML到浏览器。 Html.jsx只是一个包含HTML头信息和GA脚本等的shell，它不包含布局。
// Html.jsx render(){ return ( <html> <head> // etc. </head> <body> <div id="app" dangerouslySetInnerHTML={{__html: this.props.markup}}> </div> </body> <script dangerouslySetInnerHTML={{__html: this.props.state}</script> <script> // GA Scripts etc. </script> </html> ) }
记住它是完全正常的，甚至build议在保湿你的应用程序时在服务器上使用dangerouslySetInnerHTML的SetInnerHTML。
dynamic布局应该通过基于状态/道具configuration的组件层次结构与您的同构组件进行。 如果你碰巧使用了React Router，那么你的路由器将根据你提供的路由来渲染视图处理程序，这意味着你不需要自己pipe理它。
我们使用这种技术的原因是在体系结构上将我们的“App”分离开来，它是同构的，并且从我们的服务器端模板shell响应状态，这只是一个传送机制，并且是有效的锅炉板。 我们甚至将Html.jsx模板保留在我们应用程序中的所有快速组件中，并且不要让它与其他同构React组件混合。
我发现了用于制定React / isomorphic体系结构的最有用的资源之一是https://github.com/yahoo/flux-examples/tree/master/react-router ，这是我们从中偷取这种技术的地方。
我们研究了将把手作为客户端开发者的模板引擎，将来使用我们的产品的想法，但是决定在JSX中编写我们自己的DSL并使用一些简单的parsing例程来将我们的类似HTML的DSLparsing为JSX在模板开始处添加诸如export default （ES6模块语法）之类的东西，然后将模板导入到呈现组件。
你当然可以遵循这一思路，并使用玉石编译器吐出模板，然后添加模块的语法，如果你认为单独的玉文件是必不可less的。 我也注意到这个项目，尽pipe我没有在愤怒中探索它： https ： //github.com/jadejs/react-jade 。