Question

我正在研究一个同构的javascript应用程序，带有express + react。我们开始使用jade作为静态内容的服务器端模板，但将两者结合起来很快变得难以处理。我们最终得到了类似的东西：

在快速路线中：

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做 all 。我知道有这种事情的React.renderToStaticMarkup，但这并没有解决将动态与静态页面混合的问题。

重大问题：如果我们决定用jsx完成所有这些（比如包含所有组件的layout.jsx），那么调用React.renderToString(App({});，这会是一次重大的性能打击吗？如果是这样，有没有更好的方法来轻松组合静态和动态块？

Answer 1

虽然这可能有点偏离主题：我们坚持使用jade模板。

基本上，我们希望在需要时，如果需要，可以灵活地在站点区域使用非反应+通量架构。我们的网站基本上由许多较小的SP应用组成：Site，UserAccount，Team and Admin。

我们为什么要这样做？

较小的文件大小和开销，适用于未访问网站所有部分的用户。
在需要时选择“退出”React和flux。
更简单的服务器端身份验证。

Answer 2

我们成功完成它的方法是使用Html.jsx在服务器上呈现JSX shell模板（React.renderToStaticMarkup()），然后将其作为响应发送到每个服务器端快速路由请求，即意味着向浏览器提供一些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>
  )
}

请记住它完全没问题，甚至建议在为应用程序保湿时在服务器上使用dangerouslySetInnerHTML。

动态布局应该通过基于状态/道具配置的组件层次结构与您的同构组件完成。如果您碰巧使用React Router，那么您的路由器将根据您提供的路由呈现视图处理程序，这意味着您不需要自己管理它。

我们使用这种技术的原因是在体系结构上分离我们的“App”，它是同构的并且响应状态来自我们的服务器端模板shell，它只是一种传递机制并且是有效的锅炉板。我们甚至将Html.jsx模板保留在我们应用程序中的所有快速组件中，并且不要让它与其他同构的React组件混合。

我找到的用于计算React / isomorphic架构的最有用的资源之一是https://github.com/yahoo/flux-examples/tree/master/react-router，这是我们从中偷走这种技术的地方。

我们探索了将把手整合为客户开发人员未来使用我们产品的模板引擎的想法，但我认为在JSX中编写我们自己的DSL并使用一些简单的解析例程来解析我们的类似于HTML的DSL并不复杂通过在模板的开头添加export default（ES6模块语法）之类的东西到JSX，然后将模板导入渲染组件。

你当然可以遵循这一思路，并使用jade编译器吐出模板，然后在你认为单独的jade文件是必不可少的时候添加模块语法。我也注意到了这个项目，虽然我没有在愤怒中探讨过它：https://github.com/jadejs/react-jade。

结合反应和玉

2 个答案: