🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
1)React 的事件绑定,在服务端渲染时,并不会以 这种内联事件形态出现。所以,ReactDOMServer 渲染的内容在「结构-样式-行为」铁三角关系里,缺失了「行为」 2)在 React v15 版本里,ReactDOM.render 方法可以根据 data-react-checksum 的标记,复用 ReactDOMServer 的渲染结果,不重复渲染,而是根据 data-reactid 属性,找到需要绑定的事件元素,进行事件绑定的处理。补完「结构-样式-行为」。 3)在 React v16 版本里,ReactDOMServer 渲染的内容不再有 data-react 的属性,而是尽可能复用 SSR 的 HTML 结构。 这就带来了一个问题,ReactDOM.render 不再能够简单地用 data-react-checksum 的存在性来判断是否应该尝试复用,如果每次 ReactDOM.render 都要尽可能尝试复用,性能和语义都会出现问题。所以, ReactDOM 提供了一个新的 API, ReactDOM.hydrate() 。 ![](https://img.kancloud.cn/3b/f5/3bf5a2c2d72bdcc8646b41dfca0feb4f_720x226.png) 4)在 React v17 版本里,ReactDOM.render 则直接不再具有复用 SSR 内容的功能。见:[https://github.com/facebook/react/blob/master/src/renderers/dom/shared/\_\_tests\_\_/ReactRenderDocument-test.js#L32-L34](https://link.zhihu.com/?target=https%3A//github.com/facebook/react/blob/master/src/renderers/dom/shared/__tests__/ReactRenderDocument-test.js%23L32-L34) **结论: hydrate 描述的是 ReactDOM 复用 ReactDOMServer 服务端渲染的内容时尽可能保留结构,并补充事件绑定等 Client 特有内容的过程。**