我试图了解React 16.8.6上ReactDOMServer.renderToString()
和ReactDOMServer.renderToStaticMarkup()
之间的区别。
这是我的理解:
renderToStaticMarkup()
用于服务器端,当您只想呈现标记而又不想在客户端混合时。 (https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup)
renderToString()
函数在客户端上对应用程序进行水化处理时,在服务器端使用 ReactDOM.hydrate()
。 (https://reactjs.org/docs/react-dom-server.html#rendertostring)
因此,如果我是对的,则这两种方法之间的唯一区别是renderToString()
在应用程序的主要元素上添加了data-reactroot
。 React在renderToStaticMarkup()
文档中对此进行了强调:
类似于renderToString,除了不会创建额外的DOM React内部使用的属性,例如 data-reactroot 。这是 如果您想将React用作简单的静态页面生成器,则很有用,例如 删除多余的属性可以节省一些字节。
如果您打算在客户端上使用React来使标记具有交互性, 不要使用此方法。而是在服务器上使用 renderToString 在客户端上 ReactDOM.hydrate()。
但是,我正在阅读React的存储库中的this问题,Dan Abramov说:
相反,请使用 hydrate()明确告诉React将现有的水合物 HTML。 然后就不依赖于data-reactroot是否存在。
并且:
...建议的迁移路径是使用 ReactDOM.hydrate() 完全避免了该问题,因为它不依赖于 data-reactroot属性。
所以,我的问题是:数据反应根是否与React中的hydrate功能相关或文档是否错误?
了解这一点对于修复我在补水时遇到的错误非常有用。