React中的校验和是什么以及如何使用它？

Question

我正在读这个React服务器端渲染的例子。它声明：

  

尝试查看页面源以确保已经呈现从服务器发送的HTML（使用校验和来确定是否需要客户端呈现）

好的，我看到了网页源代码，确实存在data-react-checksum属性：

<div data-reactid=".157rq30hudc" data-react-checksum="556954499">

当我在浏览器控制台中检查元素时，它还具有以下属性：

然后我决定检查使用React服务器端渲染的网站。而且我看到奇怪的事情。页面源具有data-react-checksum属性，但该元素不是控制台。

页面来源：

<div class="activityOptionBox" data-reactid=".1l6uko4wt8g" data-react-checksum="168103090">

控制台：

这是什么意思？什么是checksum以及如何阅读/使用它？

Answer 1

当通过ReactDOM.renderToString使用服务器呈现时，客户端上的React在内部使用校验和，以确定服务器的输出是否与客户端的输出匹配。如果是这样，React可以非常有效地透明地将现有DOM从服务器升级到客户端应用程序。如果它没有匹配，则意味着在服务器上呈现的状态和道具与在客户端上呈现的状态和道具不同，并且React必须执行更昂贵的操作初始化客户端应用程序。

我检查了我的应用程序，似乎至少在某些版本的React中 - 一旦客户端应用程序启动，就会从元素中删除checksum属性，尽管它在页面的源代码中可见

由于校验和是一种内部一致性机制，除非React检测到您的服务器校验和与客户端校验和不匹配，否则您不必担心它，在这种情况下，它会告诉您通过控制台中的警告或错误。