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

Question

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

sha*_*nda 53 javascript reactjs react-dom react-fiber

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

我知道hydrate()用于组合SSR和客户端渲染.

有人可以解释什么是保湿,然后ReactDOM有什么区别？

Answer 1

top*_*her 59

从ReactDOMServer文档(强调我的):

如果您调用ReactDOM.hydrate()已具有此服务器呈现标记的节点,React将保留它并仅附加事件处理程序,从而使您具有非常高性能的首次加载体验.

粗体文字是主要区别.render如果初始DOM和当前DOM之间存在差异,则可能会更改节点.hydrate只会附加事件处理程序.

从作为单独API 引入hydrate的Github问题:

如果这是你的初始DOM <div id="container"><div class="spinner">Loading...</div></div> 然后调用ReactDOM.render(<div class="myapp"><span>App</span></div>, document.getElementById('container'))打算只做客户端渲染(不是水合).然后你结束了<div id="container"><div class="spinner"><span>App</span></div></div>.因为我们没有修补属性.

仅供参考,他们没有修补属性的原因是

......在正常的水合模式下水合这个并且将初始渲染减慢到非SSR树的速度非常慢.

我不明白为什么渲染的 div 没有类名为 myapp 的 div 以及为什么最终渲染元素中存在 spinner 类 (13认同)
@pravinpoudel我认为这是因为他们在客户端渲染期间没有修补属性。这就是为什么属性 `class="spinner"` 保持在 `<div>` 元素中的原样。 (3认同)

Answer 2

Nat*_*ell 40

我没有任何具体的内容可以添加到上面关于的使用的内容中hydrate，但是在尝试了解它的过程中，我整理了一个小示例，因此这里的工作适合任何认为有帮助的人。

目标

提供两页，一页使用ReactDOM.hydrate，另一页使用ReactDOM.render. 他们将取决于一些反应写在JSX组件，这些组件通过加载<script>，因为人为延迟（服务器）来说明之间的区别标签hydrate和render。

基本结构

一个包含 HTML“骨架”的文件
一个包含用 JSX 编写的自定义 React 组件的文件
一个脚本生成所有页面供服务器使用
一个脚本来运行服务器

结果

在我生成页面并运行服务器之后，我转到127.0.0.1并看到标题hydrate、一个按钮和两个链接。我可以点击按钮，但没有任何反应。片刻之后，文档完成加载，按钮开始计算我的点击次数。然后我点击“渲染”链接。现在，我看到的页面有标题渲染和两个链接，但没有按钮。片刻后，按钮出现并立即响应。

解释

在“水合物”页面上，所有标记都会立即呈现，因为所有必需的 html 都随页面一起提供。该按钮没有响应，因为还没有连接回调。一旦components.js完成加载，将load事件从火灾window和回调与连接hydrate。

在“渲染”页面上，按钮标记不随页面一起提供，而仅由注入ReactDOM.render，因此它不会立即可见。请注意页面的外观是如何被最终加载的脚本剧烈地改变的。

来源

这是我正在使用的自定义反应组件。它将由在节点的服务器可以使用具有反应以静态呈现组件，并且它也将被从服务器中的网页使用动态加载（这是检查的目的exports和React在文件的开头的对象）。

// components.jsx

var exports = typeof(exports) == 'object' ? exports : {};
var React = typeof(React) == 'object' ? React : require('react');

function MyButton(props) {
  [click, setClick] = React.useState(0);
  function handleClick() { setClick(click + 1); }
  return (
    <button onClick={handleClick}>Clicked: {click}</button>
  );
}

exports.MyButton = MyButton;

Run Code Online (Sandbox Code Playgroud)

这是用于生成服务器所需的所有页面的脚本。首先，使用 babel 将 components.jsx 转换为 javascript，然后使用这些组件与 React 和 ReactDOMServer 一起创建实际的页面。这些页面是使用getPage从文件中导出的功能创建的pageTemplate.js，如下所示。

// genScript.js

let babel          = require('@babel/core');
let fs             = require('fs');
let ReactDOMServer = require('react-dom/server');
let React          = require('react');
let pageTemplate   = require('./pageTemplate.js');

script = babel.transformFileSync(
  'components.jsx', 
  {presets : [['@babel/react']]}
);

fs.writeFileSync('components.js',script.code);
let components = require('./components.js');

hydrateHTML = pageTemplate.getPage(
  'MyButton',
  ReactDOMServer.renderToString(React.createElement(components.MyButton)),
  'hydrate'
);

renderHTML = pageTemplate.getPage(
  'MyButton',
  '',
  'render'
);

fs.writeFileSync('hydrate.html',hydrateHTML);
fs.writeFileSync('render.html',renderHTML);

Run Code Online (Sandbox Code Playgroud)

这个文件只是导出getPage前面提到的函数。

// pageTemplate.js

exports.getPage = function(
  reactElementTag,
  reactElementString,
  reactDOMMethod
  ) {
  return `
  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8" />
      <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js" defer></script>
      <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" defer></script>
      <script src="./components.js" defer></script>
    </head>
    <body> 
      <h1>${ reactDOMMethod }</h1>
      <div id="react-root">${ reactElementString }</div> 
      <a href="hydrate.html">hydrate</a>
      <a href="render.html">render</a>
    </body>
    <script>
      window.addEventListener('load', (e) => {
        ReactDOM.${ reactDOMMethod }(
          React.createElement(${ reactElementTag }),
          document.getElementById('react-root')
        );
      });
    </script>
  </html>
  `;
}

Run Code Online (Sandbox Code Playgroud)

最后，实际服务器

// server.js

let http = require('http');
let fs   = require('fs');

let renderPage       = fs.readFileSync('render.html');
let hydratePage      = fs.readFileSync('hydrate.html');
let componentsSource = fs.readFileSync('components.js');

http.createServer((req, res) => {
  if (req.url == '/components.js') {
    // artificial delay
    setTimeout(() => {
    res.setHeader('Content-Type','text/javascript');
    res.end(componentsSource);
    }, 2000);
  } else if (req.url == '/render.html') {
    res.end(renderPage);
  } else {
    res.end(hydratePage);
  }
}).listen(80,'127.0.0.1');

Run Code Online (Sandbox Code Playgroud)

哇。您基本上回答了问题+解释了如何构建像 Gatsby 这样的最小静态生成器。惊人的。万分感谢！ (5认同)

Answer 3

小智 17

除了以上......

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

使用ReactDOM.render()来水合服务器呈现的容器由于速度慢而不推荐使用,并且将在React 17中删除,因此请使用hydrate().

Answer 4

Sum*_*oor 13

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

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

Answer 5

Dan*_*iel 7

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

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

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

Answer 6

小智 7

render 将清除指定元素（在大多数情况下称为“root”）中的所有内容并重建它，而 Hydrate 将保留指定元素中已有的所有内容并从中构建，从而使初始页面加载速度更快。

归档时间：	8 年，2 月前
查看次数：	26512 次
最近记录：	6 年，8 月前