react-dom 的 renderToString 与 renderToStaticMarkup (转载)

最新推荐文章于 2023-12-07 15:37:51 发布

yupeng2011

最新推荐文章于 2023-12-07 15:37:51 发布

阅读量2.2k

点赞数

转载地址：http://www.jianshu.com/p/5fa6d6c63d96

介绍

renderToString 与 renderToStaticMarkup 都是同 render 一样都是 react-dom 包提供的方法
不过 renderToString 和 renderToStaticMarkup 在 react-dom/server 内

import {render} from 'react-dom'

import {renderToString} from 'react-dom/server'
import {renderToStaticMarkup} from 'react-dom/server'

render 方法不用多说, 是用于浏览器端渲染, 学习过 react 的都接触过
render 方法接受 2 个参数 render([react element], [DOM node])

而 renderToString 与 renderToStaticMarkup 只接受一个参数
renderToString(react element)
renderToStaticMarkup(react element)
但都返回一段HTML字符串, 这就使得 react 在服务端渲染成为可能.

演示代码

如代码所示

服务端
使用 renderToString/renderToStaticMarkup 方法将 <Hello /> 组件渲染到 #react-target 节点内

import {renderToString} from 'react-dom/server'
import React from 'react'
import KoaRouter from 'koa-router'
import Hello from '../../react/server'
app.get('/hello', (ctx, next) => {
  ctx.body = `
    <html>
    <head>
      <title>title</title>
      <script src="/socket.io/socket.io.js"></script>
    </head>
    <body>
      <div id="react-target">${renderToString(<Hello />)}</div>
      {/* <div id="react-target">${renderToStaticMarkup(<Hello />)}</div> */}
      <script src="/main.js"></script>
    </body>
    </html>
  `
})

浏览器端
使用 render 方法将 <Hello /> 组件渲染到 #react-target 节点内
```
render(<Hello />, document.getElementById('react-target'))
```

区别

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 绑定浏览器事件等这些在服务端没完成也不可能执行任务.

tips

服务端渲染的时候不要习惯性地写成下面这种形式
<div id="react-target">${renderToString(<Hello />)}</div>

而应该写成没有空格的形式, 如下
<div id="react-target">${renderToString(<Hello />)}</div>

因为这样会增加空格, 导致前端 react.js 不认识之前服务端渲染的内容, 导致重新渲染!

另外一点需要注意的是前后端渲染的内容应该保持一致
- DOM 结构
- store

这里还没有涉及到 stote, 未完待续...

yupeng2011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react-dom 的 renderToString 与 renderToStaticMarkup (转载)

转载地址：http://www.jianshu.com/p/5fa6d6c63d96介绍renderToString 与 renderToStaticMarkup 都是同 render 一样都是 react-dom 包提供的方法不过 renderToString 和 renderToStaticMarkup 在 react-dom/server 内import {ren
复制链接

扫一扫