eri*_*icn 7 express reactjs react-router
首先,页面由服务器呈现,然后在客户端/浏览器端,Javascript脚本重新呈现整个页面!
我不认为这是它应该如何,因为它是非常糟糕的用户体验.
我注意到的一件事是,data-reactid我的根元素的属性由服务器呈现的是一些哈希,.2t5ll4229s并且所有孩子都将其作为前缀例如.2t5ll4229s.0(第一个孩子).然而,在浏览器端,data-reactid是.0根元素和.0.0第一个子元素.
如果data-reactid真的是这里的罪魁祸首,有没有办法eric123为客户端和服务器端设置一个选择值.
如果data-reactid不是这里的罪魁祸首,我如何使服务器和客户端呈现React无缝,即只有某些元素应该由客户端重新呈现,而不是一切!？
我的index-server-local.html模板:
...
<body>
<div id="content" class="container-fluid wrapper no-padding-left no-padding-right">
{{{reactHtml}}}
</div>
<script src="bundle.js"></script>
</body>
...
我的server.js:
server.get('*', function (req, res) {
console.log('request url', req.url);
log.debug('routes are', JSON.stringify(routes));
res.header("Access-Control-Allow-Origin", "*");
match({routes, location: req.url}, (error, redirectLocation, renderProps) => {
if (renderProps) {
let htmlStr = React.renderToString(<RoutingContext {...renderProps} />);
res.render('index-server-local', { reactHtml: htmlStr });
}
}
我的browser.js:
React.render(<Router history={history} routes={routeConfig} />, document.getElementById('content'));
我正在使用react-router 1.0.0和React 0.13.3.
我们需要在服务器端序列化数据（或状态），并将其发送到客户端进行反序列化，否则，客户端的数据与服务器渲染时的数据不同。它肯定会重新加载。一个例外：纯静态页面，在这种情况下React推荐我们使用renderToStaticMarkup
与 renderToString 类似，但它不会创建 React 内部使用的额外 DOM 属性，例如 data-react-id。如果您想使用 React 作为简单的静态页面生成器，这非常有用，因为剥离额外的属性可以节省大量字节。
那么，我们如何序列化-反序列化呢？这是一个简单的版本：在您的 index-server-local.html 模板中：
<script src="bundle.js"></script>
到：
<script dangerouslySetInnerHTML={{{{__html: 'window.__data=' + JSON.stringify({key: 'value'})}}}} />
<script src="bundle.js"></script>
在客户端，我们现在可以使用__datadata。如何将数据映射到您的组件取决于您的选择。
我Reudx为此建议：
createStore(browserHistory, initialState)
进而
<Provider store={store}>
{ component }
</Provider>
| 归档时间： |
|
| 查看次数： |
353 次 |
| 最近记录： |