react组件服务器渲染问题（一）

客户端渲染过程：

1）一个html请求；

2）服务器返回html请求；

3）下载css和js文件；

4）运行js文件，并且发出请求要求得到渲染的数据；

5）服务器返回数据；

6）客户端接受数据，并将数据加载到v-dom，然后再渲染页面；

服务端渲染过程：

1）一个html请求；

2）服务器接收到请求，并内部发出请求数据；

3）将数据渲染到组件，并通过渲染函数变成html字符串，挂载到视图模板；

4）返回已经渲染好的页面；

5）加载js和css文件；

6）已经渲染好的组件已经存在页面中；

服务端渲染的优点：

1）渲染速度快；2）减少客户端向服务端请求的耗时；

渲染函数：

背景：在客户端渲染中，由于有dom的存在，可以有ReactDOM.render方法将v-dom渲染到dom中；但在服务器中，由于没有dom的存在，因此不能用过此种途径将v-dom渲染到页面，因此有使用渲染函数；

渲染函数：适用于服务端，主要是在服务端将可视数据渲染到已经存在的组件中，并将已经渲染的组件转成html字符串，以方便挂载到视图模板中；

renderTostring：用来将v-dom转变成html字符串并返回；

语法：ReactDOMServer.renderToString(V-dom);

特点：参数中不带表示dom位置的参数；

返回的html字符串类似于：

<div data-reactid="" data-react-checksum="">...</div>

data-reactid:用来区分其他dom节点的标志，且可用于寻找和更新dom节点用；

data-react-checksum：容许客户端复用服务器的dom结构，且只存在于服务端和存在于根节点中；

renderToStaticMarkup：与renderToString用法一样，知识返回的数据不包含data-reactid和data-react-checksum这两个属性；

区别：

renderToStaticMarkup：不打算将v-dom渲染到客户端的页面上，

用途：1）制作电子邮件；2）将html转成pdf；3）组件测试；

renderToString:将v-dom渲染到客户端的页面上，适用于大多数情况；