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

我正在阅读React服务器端渲染的这个例子.它指出:

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

好的,我看到了页面源,确实有一个data-react-checksum属性:

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

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

页面来源:

安慰:

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

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

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

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