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

Question

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

Try viewing the page source to ensure the HTML being sent from the server is already rendered (with checksums to determine whether client-side rendering is necessary)

好的，我看到了页面源代码，确实有一个 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">

控制台:

这是什么意思？ 校验和有什么用以及如何读取/使用它？

Answer 1

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

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

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