结合反应和玉

Question

结合反应和玉

joh*_*tah 23 javascript node.js express reactjs pug

我正在使用express + react处理一个同构的javascript应用程序.我们开始使用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);
});

Run Code Online (Sandbox Code Playgroud)

在玉:

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

  include ./content_block_2.jade

  #slideshow-main-mount
    != slideshowHtml

Run Code Online (Sandbox Code Playgroud)

这非常脆弱 - 如果我们想要jsx然后是jade模板然后更多jsx,我们必须确保我们得到正确的顺序.

我的想法是用jsx 做到这一切.我知道有这种事情的React.renderToStaticMarkup,但这并没有解决将动态与静态页面混合的问题.

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

Answer 1

And*_*gan 6

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

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

我们为什么这样做？

对于未访问网站所有部分的用户,文件大小和开销较小.
如果需要,可以选择"退出"React和flux.
更简单的服务器端身份验证.

实际上我们最终还是做了100%的反应.用PHP编写的后端API,通过JWT进行身份验证. (10认同)

Answer 2

ric*_*ard 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>
  )
}

Run Code Online (Sandbox Code Playgroud)

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

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

我们使用这种技术的原因是在架构上将我们的“应用程序”与我们的服务器端模板外壳分离，该“应用程序”是同构的并响应状态，而服务器端模板外壳只是一种交付机制，并且实际上是样板。我们甚至将Html.jsx模板保留在应用程序中的所有 Express 组件中，并且不让它与其他同构 React 组件混合。

我发现对于制定 React/同构架构最有用的资源之一是 https://github.com/yahoo/flux-examples/tree/master/react-router，这是我们窃取这项技术的地方。

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

当然，如果您认为单独的 jade 文件是必要的，您当然可以遵循这一思路并使用 jade 编译器吐出模板，然后在其周围添加模块语法。我也注意到了这个项目，尽管我没有愤怒地探索它： https: //github.com/jadejs/react-jade。

归档时间：	10 年，6 月前
查看次数：	16672 次
最近记录：	9 年，4 月前