React中的校验和是什么以及如何使用它？
我正在阅读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以及如何阅读/使用它？
Mic*_*ley 14
当使用服务器渲染时,客户端上的React在内部使用校验和ReactDOM.renderToString来确定服务器的输出是否与客户端的输出匹配.如果是这样,React可以非常有效地透明地将现有DOM从服务器升级到客户端应用程序.如果它不匹配,则意味着在服务器上呈现的状态和props与在客户端上呈现的状态和props不同,并且React必须执行更昂贵的操作来初始化客户端应用程序.
我检查了我的应用程序,似乎至少在某些版本的React中,一旦客户端应用程序启动,就会从元素中删除checksum属性,尽管它在页面的源代码中可见.
由于校验和是一种内部一致性机制,除非React检测到您的服务器校验和与客户端校验和不匹配,否则您不必担心它,在这种情况下它会通过控制台中的警告或错误告诉您.
| 归档时间： |
|
| 查看次数： |
3895 次 |
| 最近记录： |