我正在使用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);
});
在玉:
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({});,这会是一次重大的性能打击吗？如果是这样,有没有更好的方法来轻松组合静态和动态块？
我正在研究一个同构的React + Flux + express应用程序,并使用webpack加载器为我的sass(使用sass-loader)和jsx文件.我不知道如何将我的样式表注入服务器端模板.我为此目的看了一下Extract Text Plugin,但我真的希望能够使用热模块替换.现在,我将我的main.scss文件加载到这样的React组件中:
if (typeof window !== 'undefined') {
require("!style!css!sass!../../../styles/main.scss");
}
这适用于在组件中加载单个样式表,但在安装React部件之前有一个闪烁.我知道这是因为这是在我的客户端应用程序加载后注入样式表,因此样式表不能立即可用.这导致了一个实际的问题:是否有一种方法可以在使用webpack加载器的同时将此样式表注入我的服务器端模板,或者是否需要单独的gulpfile或表达中间件？我以前使用gulpfile来构建我的样式表,但我最终会有很多样式表,并且不希望它们都被卡在一个文件中.