Question

当使用React在服务器上呈现组件时，我注意到data-reactid属性实际上是随机的。我明白这是预期的。（https://groups.google.com/forum/#!topic/reactjs/ewTN-WOP1w8）

然而，这个功能框架在视图输出中引入了这种非确定性，这有点令人惊讶。这意味着具有相同状态的视图的连续渲染将创建不同的HTML，例如，防止视图引擎返回“304 Not Modified”或生成可靠的ETag。（我很欣赏这种缓存也可以在更高的基础设施层处理。）

有没有办法播种标识符的生成，以便反应是确定性的？或者是在其他地方解释一个坏主意的原因？

Answer 1

在Google Group thread Ben Alpert的最终评论中说：

对于服务器渲染，重要的是不同的渲染组件没有碰撞ID（例如，即使它们在不同的服务器上渲染），所以我们随机选择它们。

Answer 2

最近也考虑过它（刚开始使用reactjs），

可能的解决方案非常简单 - 不需要从真正的html生成ETag ... - 它可以从显示的数据生成。

所以你可以从虚拟dom生成它 - 只需使用React.renderComponentToStaticMarkup(…)并从中生成ETag ......

或者您可以在散列之前使用regexp从呈现的html中删除所有的重新提示（可能比单独渲染更快）...

如果你使用快递，这将是：

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( ... );

Answer 3

这也让我感到烦恼，所以我做了一些挖掘工作，看看如果我确定root的确定性会发生什么。

如果您愿意忍受以下黑客攻击，可以在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的一部分，因此在不久的将来可能会中断。但是，如果您绝对需要它，现在可以使用它。它还使data-react-checksum属性对于相同的渲染DOM保持稳定。

如果您在一个页面中有多个根React组件，它们必须具有不同的根ID，因此您需要修改此函数以解决此问题。

服务器端呈现的稳定重新连接

3 个答案: