renderToString和renderToStaticMarkup的区别

最新推荐文章于 2024-08-01 03:56:10 发布

songshuzhong

最新推荐文章于 2024-08-01 03:56:10 发布

阅读量2.3k

点赞数

分类专栏： frontend window

本文链接：https://blog.csdn.net/songshuzhong/article/details/81129913

版权

31 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

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