React hydrateRoot如何实现

news2024/12/28 22:37:27

React 服务器渲染中，hydrateRoot 是核心，它将服务器段的渲染与客户端的交互绑定在一起，我们知道 React 中 Fiber Tree 是渲染的的核心，那么 React 是怎么实现 hydrateRoot 的呢？首先我们验证一下，hydrateRoot 和 createRoot 有什么区别。分别创建两个 React 组件，一个用 createRoot，一个用 hydrateRoot，为了演示方便，直接用引入 React 脚本的方式。

CreateRoot

本例中，页面 Dom已经存在了一个 Button 按钮，createRoot 会将其替换掉而不会重用。直接替换 Root 节点，从 Console 中可以看到返回为 false，节点不同。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"><button>0</button></div>
    <script type="text/babel">
      const useState = React.useState;

      function App() {
        const [state, setState] = useState(0);
        return (
          <button onClick={() => setState((state) => state + 1)}>
            {state}
          </button>
        );
      }

      const rootElement = document.getElementById("root");
      const originalButton = rootElement.firstChild;
      ReactDOM.createRoot(rootElement).render(<App />);
      setTimeout(
        () =>
          console.log(
            originalButton === rootElement.firstChild
            
          ),
        0
      );

    
    </script>
  </body>
</html>

在这里插入图片描述

hydrateRoot

修改代码 ReactDOM.createRoot(rootElement).render(); 到 ReactDOM.hydrateRoot(rootElement, ); ，代码只需要修改这一句，从截图中可以看到，D 节点没有被替换。
在这里插入图片描述
通过这个例子，可以看到 createRoot 和 hydrateRoot 的区别是在于是否替换节点，React 在渲染流程做了某些从而最终达到这种效果，我们看一下 React 的代码是怎么实现的。

在 React 中 Fiber 树的遍历通过 beginWork 和 completeWork 进行的，首先看 beginWork，beginWork 当 React 遇到 HostComponent HTML 节点时，进入 updateHostComponent，updateDateHOstComponent 会调用

在这里插入图片描述