美文网首页
react-dom/server

react-dom/server

作者: 指尖轻敲 | 来源:发表于2018-08-09 18:01 被阅读17次

react-dom/server能够使将组建渲染为静态标记,通常使用与Node服务端做服务端渲染上。

import ReactDOMServer from 'react-dom/server';

renderToString()

该方法在服务器上使用,用于将React元素渲染到初始HTML中。如果在已经有服务器渲染标记的节点上使用ReactDOM.hydrate(),React将保留它,并且只附加时间处理程序,使得第一次加载速度大大提升。

ReactDOMServer.renderToString(element)

renderToStaticMarkup()

renderToString()方法类似,但是不会创建额外的DOM属性。如果只是用React作为一个简单的静态页面生成器,使用这个方法可以节省一些字节,使性能更加提升一步。但是如果要使标记具有交互性,就乖乖使用renderToString()吧。

ReactDOMServer.renderToStaticMarkup(element)

renderToNodeStream()和renderToStaticNodeStream()

这两个方法上上面两个其实效果是一样的,将React元素渲染到最初HTML中,返回一个可读的流(stream),即输出HTML字符串,该字符串和上面两个方法返回的内容一致。

ReactDOMServer.renderToNodeStream(element)
ReactDOMServer.renderToStaticNodeStream(element)

这两个方法只适用于服务端,在浏览器中不可用。

详情查看React中文文档

相关文章

  • React 笔记二:react-dom

    React 笔记二:react-dom 对应的API 注:react-dom/server是专门针对server端...

  • react-dom/server

    react-dom/server能够使将组建渲染为静态标记,通常使用与Node服务端做服务端渲染上。 render...

  • react-dom react-router react-rou

    React-dom 提供了针对DOM的方法Import ReactDOM from ‘react-dom'Reac...

  • 六、react基本概念

    1、react-dom和react为什么要分开因为还有react-dom、react-canvas、react-a...

  • react-dom

    react-dom包提供了DOM的特定方法。 render()和hydrate() 都是将React元素渲染到容器...

  • react-dom

    React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。...

  • note/2-5服务端渲染基础配置

    介绍 react-dom是React专门为web端开发的渲染工具。我们可以在客户端用react-dom的rende...

  • 常用的版本

    "webpack": "4.41.2", "react": "16.12.0","react-dom": "16....

  • React-dom6 重定向

    React-dom 6 重定向写法

  • npm命令整理

    npm install --save react react-dom babelify babel-preset-...

网友评论

      本文标题:react-dom/server

      本文链接:https://www.haomeiwen.com/subject/xxpcbftx.html