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 可以非常有效地将现有 DOM 从服务器透明地升级到客户端应用程序。如果 不匹配，则意味着要在服务器上渲染的 state 和 props 与要在客户端渲染的 state 和 props 不同，React 必须执行更昂贵的操作来初始化客户端应用程序。

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

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