javascript - 结合 react 和 Jade

Question

我正在开发一个带有 express + react 的同构 javascript 应用程序。我们开始使用jade 作为静态内容的服务器端模板，但是将两者结合起来很快变得笨拙。我们最终得到了这样的结果:

在快速 route :

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);
});

在 Jade 中:

body
  .company-logo.center
  #react-main-mount
    != reactOutput
  include ./content_block_1.jade

  include ./content_block_2.jade

  #slideshow-main-mount
    != slideshowHtml

这很脆弱——如果我们想要 jsx 然后是一个 Jade 模板然后更多的 jsx，我们必须确保我们得到正确的顺序。

我的想法是全部使用 jsx。我知道这类事情有 React.renderToStaticMarkup ，但这并不能解决将动态页面与静态页面混合的问题。

大问题:如果我们决定用 jsx 来完成所有这些工作(比如 layout.jsx 包含所有组件)，那么调用 React.renderToString(App({});，会这样吗？对性能造成重大影响？如果是这样，是否有更好的方法来轻松组合静态和动态 block ？

Answer 1

虽然这可能有点离题:我们坚持使用 Jade 模板。

基本上，我们希望在需要时灵活地为站点区域使用非 react + 通量架构。我们的网站基本上由许多较小的 SP 应用组成:Site、UserAccount、Team 和 Admin。

我们为什么要这样做？

• 对于没有访问网站所有部分的用户来说，文件大小和开销更小。

• 如果需要，可以选择“退出” React 和 Flux。

• 更简单的服务器端身份验证。