服务器端渲染的稳定reactid
当使用React在服务器上呈现组件时，我注意到data-reactid属性实际上是随机的。我知道这是意料之中的。(https://groups.google.com/forum/#!topic/reactjs/ewTN-WOP1w8)
然而，令人有点惊讶的是，这个函数式框架在视图输出中引入了这样的不确定性。这意味着具有相同状态的视图的连续渲染将创建不同的超文本标记语言，例如，防止视图引擎返回“304未修改”或生成可靠的ETag。(我很欣赏这样的缓存也可以在更高的基础架构层上处理。)
有没有一种方法来播种标识符的生成，从而使反应是确定性的？或者这是一个糟糕的想法的原因在其他地方解释了吗？
回答 3
Stack Overflow用户
发布于 2015-02-18 06:00:16
在对Google Group thread的最后评论中，Ben Alpert说：
对于服务器渲染，重要的是不同的渲染组件没有冲突的it(例如，即使它们在不同的服务器上渲染)，所以我们随机选择它们。
Stack Overflow用户
发布于 2015-02-22 15:39:00
我最近也考虑过它(刚刚开始使用reactjs)，
可能的解决方案非常简单--不需要从真正的html生成ETag……-可以从显示的数据生成。
所以你可以从虚拟dom生成它--只需使用React.renderComponentToStaticMarkup(…)并从它生成ETag……
或者你可以在散列之前使用regexp从渲染的html中删除所有的reactid(可能比单独渲染更快)……
如果您使用的是express，则如下所示：
var virtualDom = React.createFactory(Handler)({});
var html = React.renderToString(virtualDom);
var etag = app.get('etag fn');
if (etag) {
etag = etag(React.renderComponentToStaticMarkup(virtualDom), 'utf8');
etag && res.set('ETag', etag);
}
res.render( ... );Stack Overflow用户
发布于 2015-11-08 20:46:39
这也困扰着我，所以我做了一些挖掘，看看如果我将root reactid设置为确定性会发生什么。
如果你愿意忍受下面的攻击，可以在React 0.14.x中覆盖这一点。在调用ReactDOM.renderToString的服务器端文件中，将以下代码放在顶部：
// Override the ServerReactRootIndex.createReactRootIndex function
var ServerReactRootIndex = require('react/lib/ServerReactRootIndex');
ServerReactRootIndex.createReactRootIndex = function(){
return "x"; // Results in an attribute like data-reactid=".x"
};
// Use React as usual
// NB: require('react') must come AFTER overriding ServerReactRootIndex.createReactRootIndex
var React = require('react');这不是React API的一部分，所以在不久的将来可能会中断。但是，如果您确实需要的话，现在可以使用它。它还使相同呈现的DOM的data-react-checksum属性稳定。
如果您在一个页面中有多个根React组件，则它们必须具有不同的根ids，因此您需要修改此函数以解决此问题。
https://stackoverflow.com/questions/28522579
复制相似问题
腾讯云开发者
