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 特有内容的过程。**
- 说明
- react源码
- 问答
- 慕课网视频
- 第二章:基础知识
- 001.ReactElement
- 002.react-component
- 003.ref
- 004.forwardRef
- 005.context
- 006.concurrentMode
- 007.supense和lazy
- 008.hooks
- 009.children
- 010.memo
- 011.others
- 第三章:react的更新
- 001.react-dom-render
- 第四章:Fiber Scheduler
- 第五章:各类组件的Update
- 第六章:完成节点任务
- 第七章:commitRoot
- 第八章:功能详解:基础
- 第九章:suspense and priority
- 第十章:功能详解:Hooks
- 001.基础知识
- 002.hook
- 003.RootFiber
- 004. hydrate
- react
- 高阶组件
- react基础
- Github面试题目