renderToString
方法渲染的时候带有data-reactid
属性.renderToStaticMarkup
则没有data-reactid
属性, 可以节省一点流量.
data-reactid
简单的说就是 react 组件
的一个唯一标示 id, 具体可以去 google 下
对于服务端渲染而言
-
使用
renderToStaticMarkup
渲染出的是不带data-reactid
的纯html
在前端react.js
加载完成后, 之前服务端渲染的页面会抹掉之前服务端的重新渲染(可能页面会闪一下). 换句话说 前端react
就根本就不认识之前服务端渲染的内容,render
方法会使用innerHTML
的方法重写#react-target
里的内容 -
而使用
renderToString
方法渲染的节点会带有data-reactid
属性, 在前端react.js
加载完成后, 前端react.js
会认识之前服务端渲染的内容, 不会重新渲染DOM 节点
, 前端react.js
会接管页面, 执行componentDidMout
绑定浏览器事件
等 这些在服务端没完成也不可能执行任务.