ReactDomServer 将react组件转化成html静态标签(SSR服务器渲染)

复制代码
前言: 因为使用图表里面的formatter函数需要原生的html标签,但是本身技术栈是react,所以为了方便,便使用了ReactDomServer api将react组件转化成html原生标签

引入:

复制代码
import ReactDomServer from 'react-dom/server';

使用

renderToString()

复制代码
ReactDOMServer.renderToString(element)

最基础的 SSR API,输入 React 组件(准确来说是ReactElement),输出 HTML 字符串。之后由客户端 hydrate API 对服务端返回的视图结构附加上交互行为,完成页面渲染:

If you call ReactDOM.hydrate() on a node that already has this server-rendered markup, React will preserve it and only attach event handlers.

renderToStaticMarkup()

复制代码
ReactDOMServer.renderToStaticMarkup(element)

renderToString类似,区别在于 API 设计上,renderToStaticMarkup只用于纯展示(没有事件交互,不需要 hydrate)的场景

This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save some bytes. If you plan to use React on the client to make the markup interactive, do not use this method. Instead, use renderToString on the server and ReactDOM.hydrate() on the client.

因此renderToStaticMarkup只生成干净的 HTML,不带额外的 DOM 属性(如data-reactroot),比较干净小巧

二者的渲染结果分别为:

复制代码
// renderToString
<div data-reactroot=""><h1 class="here">Welcome to React SSR!<!-- --> Hello There!</h1></div>

// renderToStaticMarkup
<div><h1 class="here">Welcome to React SSR! Hello There!</h1></div>

React 16以后 renderToStaticMarkuprenderToString的实际差异主要在于:

  • renderToStaticMarkup不生成data-reactroot
  • renderToStaticMarkup不在相邻文本节点之间生成<!-- -->(相当于合并了文本节点,不考虑节点复用,算是针对静态渲染的额外优化措施)

所以我这里用的是RenderToStaticMarkup() 方法

代码:

复制代码
import React from 'react';
import ReactDomServer from 'react-dom/server';
const B =()=>{
    
    const renderHtml = ()=>{
        return ReactDomServer.renderToStaticMarkup(
            <div className="abcd" style={{fontSize:25,marginTop:10,fontWeight:"bold"}}>测试renderToStaticMarkup</div>
        )
    }
    console.log('fff',renderHtml());
    return <div dangerouslySetInnerHTML={{__html:renderHtml()}} />
}
export default B

效果:

相关推荐
牧羊狼的狼2 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手4 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one4 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲4 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell4 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830946 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮6 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel7 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip7 小时前
JavaScript事件流
前端·javascript
小菜全7 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json