Reactjs 用于服务器端渲染的稳定reactid

在服务器上使用React渲染组件时，我注意到数据reactid属性实际上是随机的。我知道这是意料之中的。（）

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

---

是否有一种方法来种子化标识符的生成，从而使reactID具有确定性？或者这是一个坏主意的原因在其他地方有解释吗？

在本·阿尔伯特的最后评论中说：

对于服务器渲染，重要的是不同的渲染组件没有冲突ID（例如，即使它们在不同的服务器上渲染），因此我们随机选取它们

---

最近也考虑过（刚刚开始使用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( ... );

---

这也困扰着我，所以我做了一些挖掘，看看如果我让根产生反应会发生什么

如果您愿意忍受下面的攻击，可以在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的数据反应校验和属性保持稳定

---

如果在一个页面中有多个根React组件，它们必须有不同的根ID，因此您需要修改此函数以说明这一点。

除了说“这很重要”，还不清楚为什么会这样。我读到他的评论说React使用随机ID的原因是因为组件不能有冲突ID，甚至跨不同的服务器。有一些关于更改的讨论，如果需要，您可以按照他们的指示生成自己的ID。