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

Question

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

6

我正在阅读有关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是什么，如何读取/使用它？

- Green

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michelle Tilley · Accepted Answer

校验和被React在客户端使用，特别是在通过ReactDOM.renderToString进行服务器渲染时，用于确定来自服务器的输出是否与来自客户端的输出相匹配。如果匹配，React可以非常高效地将现有的DOM从服务器升级到客户端应用程序中。如果不匹配，则表示在服务器上呈现的状态和属性与客户端上呈现的状态和属性不同，因此React必须执行更昂贵的操作来初始化客户端应用程序。

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

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