我已经阅读了文档,但是我并没有真正理解React 16 hydrate()
和之间的区别render()
。
我知道hydrate()
用来结合SSR和客户端渲染。
有人可以解释一下什么是补水,然后ReactDOM有什么区别?
我已经阅读了文档,但是我并没有真正理解React 16 hydrate()
和之间的区别render()
。
我知道hydrate()
用来结合SSR和客户端渲染。
有人可以解释一下什么是补水,然后ReactDOM有什么区别?
水合物基本上用于SSR(服务器端渲染)。SSR为您提供了从服务器提供的框架或HTML标记,因此,第一次在页面加载时不为空白,搜索引擎机器人可以将其索引为SEO(SSR的一个用例)。因此,水合物会将JS添加到您的页面或要应用SSR的节点。这样您的页面才能响应用户执行的事件。
渲染用于在客户端浏览器Plus上渲染组件,如果尝试将水合物替换为渲染,则会收到警告,提示渲染已弃用,在SSR情况下无法使用。由于它比水合物慢,因此将其除去。
除了以上...
ReactDOM.hydrate()
与相同render()
,但是它用于水合(附加事件侦听器)其HTML内容由ReactDOMServer呈现的容器。React将尝试将事件侦听器附加到现有标记。
由于反应缓慢,不建议使用ReactDOM.render()水合服务器渲染的容器,因此在React 17中将其删除,请hydrate()
改用。
将功能放回到已经在服务器端React中呈现的HTML中的整个过程称为水合。
因此,对曾经渲染过的HTML进行重新渲染的过程称为水合。
因此,如果我们尝试通过调用应用程序来充水我们的应用程序,那么
ReactDOM.render()
应该通过调用来完成它ReactDOM.hydrate()
。