React 16中的hydrate()和render()有什么区别?

JavaScript React.js

古一蓝染大人别太浪

2020-03-19

我已经阅读了文档,但是我并没有真正理解React 16 hydrate()之间的区别render()

我知道hydrate()用来结合SSR和客户端渲染。

有人可以解释一下什么是补水,然后ReactDOM有什么区别?

第2234篇《React 16中的hydrate()和render()有什么区别?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
西门泡芙Jim 2020.03.19

将功能放回到已经在服务器端React中呈现的HTML中的整个过程称为水合。

因此,对曾经渲染过的HTML进行重新渲染的过程称为水合。

因此,如果我们尝试通过调用应用程序来充水我们的应用程序,那么ReactDOM.render()应该通过调用来完成它ReactDOM.hydrate()

理查德西门Near 2020.03.19

水合物基本上用于SSR(服务器端渲染)。SSR为您提供了从服务器提供的框架或HTML标记,因此,第一次在页面加载时不为空白,搜索引擎机器人可以将其索引为SEO(SSR的一个用例)。因此,水合物会将JS添加到您的页面或要应用SSR的节点。这样您的页面才能响应用户执行的事件。

渲染用于在客户端浏览器Plus上渲染组件,如果尝试将水合物替换为渲染,则会收到警告,提示渲染已弃用,在SSR情况下无法使用。由于它比水合物慢,因此将其除去。

宝儿DavaidL 2020.03.19

除了以上...

ReactDOM.hydrate()与相同render(),但是它用于水合(附加事件侦听器)其HTML内容由ReactDOMServer呈现的容器。React将尝试将事件侦听器附加到现有标记

由于反应缓慢,不建议使用ReactDOM.render()水合服务器渲染的容器,因此React 17中将其删除,请hydrate()改用。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android