水合原理
数据的注水与脱水及其实现原理 参考代码 https://github.com/Lie8466/re... SSR 模式下，服务端只执行 3 个生命周期函数： constructor getDerivedStateFromProps render 其余任何生命周期在服务端都不执行，因此下面代码中的componentDidMount在服务端并不会执行。 ReactDOM.hydrate 过程 从源码角度看React-Hydrate原理 - 个人文章 - SegmentFault 思否 比较虚拟DOM和客户端DOM：hydrate会比较服务器端渲染的虚拟DOM和客户端DOM，以识别出需要更新的节点。 更新需要更新的节点：hydrate会将需要更新的节点进行更新，从而使页面呈现与服务器端渲染的内容一致。 触发事件监听器：hydrate会在更新节点后触发事件监听器，以确保页面交互的正常进行。 一、比较 DOM hydrate的过程描述为：
- React 在 render 阶段，构造 workInProgress 树时，同时按相同的顺序遍历真实的 DOM 树，判断当前的 workInProgress fiber 节点和同一位置的 dom 实例是否满足hydrate的条件
- 如果满足，则直接复用当前位置的 DOM 实例，并相互关联 workInProgress fiber 节点和真实的 dom 实例。如果不满足则更新需要更新的节点，从而使页面呈现与服务器端渲染的内容一致。 二、监听全局事件 在客户端运行hydrate时，首先会统一增加对所有支持事件的监听（与render类似）。与render不同，hydrate 监听的是div#root 元素的所有事件，而render方法监听的是document元素。 三、为元素添加事件 其次前面的工作与render是一致的，客户端会将React Element组装为Fiber Node的树。 在对 fiber 树进行遍历的时候，有几个特别重要的function performUnitOfWork beginWork completeUnitOfWork completeWork hydrate与render对这个树进行遍历的逻辑是一样的，区别是render不需要考虑旧节点，将新节点渲染到页面上即可，而运行hydrate时页面上已经有渲染的元素，需要考虑页面元素是否需要保留、修改或者删除。
来源整理自：vue3js.cn 面试官系列
