react组件服务器渲染问题(一)

    xiaoxiao2021-12-14  18

    客户端渲染过程:

    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渲染到客户端的页面上,适用于大多数情况;

    转载请注明原文地址: https://ju.6miu.com/read-962755.html

    最新回复(0)