React中render与hydrate方法的区别是什么？

1. 核心定位不同 #

• render是纯客户端渲染的标配：它会直接清空目标容器内的所有现有内容，从零开始渲染完整的React组件树，适合完全在浏览器端生成页面的场景。
• hydrate是SSR场景专属工具：它不会清空容器里由服务端渲染好的静态HTML，而是在这个基础上“激活”静态DOM——也就是给这些节点绑定事件监听、关联React组件状态，让静态页面变成可交互的客户端应用。

2. 内容不匹配时的处理逻辑差异 #

这是最容易被忽略的关键区别：

• 用render处理SSR生成的HTML时，如果客户端组件渲染的内容和服务端输出的HTML不一致，React会直接把容器内的内容全部替换成客户端渲染的结果，过程中可能出现页面闪烁。
• 用hydrate时，若遇到内容不匹配，React只会在控制台抛出警告，不会立刻替换页面内容（后续组件更新还是会遵循客户端状态）。这个警告是帮你排查SSR与客户端渲染不匹配的bug——正常情况下，SSR输出和客户端渲染的内容必须完全一致，hydrate的警告就是在提示你修复这个问题。

为什么你觉得两者表现一致？ #

大概率是这两种情况：

• 你的SSR输出和客户端组件渲染的内容完全一致：此时hydrate顺利完成激活，render也只是把相同内容重新渲染一遍（因为内容无差异，你看不到清空替换的过程），所以表现看起来没区别。
• 你没注意控制台的警告：如果存在内容不匹配，hydrate会明确抛出警告，而render不会。

举个直观例子：
假设服务端输出的HTML是 <div>Hello SSR</div>，但客户端组件渲染的是 <div>Hello Client</div>：

• 用render(<App />, document.getElementById('root'))：页面内容会直接变成Hello Client，可能伴随短暂闪烁。
• 用hydrate(<App />, document.getElementById('root'))：控制台会弹出内容不匹配的警告，页面暂时还是Hello SSR，直到组件触发更新才会切换成Hello Client。

内容的提问来源于stack exchange，提问作者Jokoyoski