此文章是翻译ReactDOMServer这篇React(版本v15.4.0)官方文档。

ReactDOMServer

如果你用script 标签来使用React,这些顶级APIs 将会在全局ReactDOMServer 上有用。如果你在npm 中使用ES6,你可以写import ReactDOMServer from 'react-dom/server'。如果你在npm 中使用ES5,你可以写var ReactDOMServer = require('react-dom/server')

Overview

ReactDOMServer 允许你在服务端渲染你的component。

Reference

renderToString()

1
ReactDOMServer.renderToString(element)

渲染一个R 大专栏  react ReactDOMServereact element 去初始化HTML。这仅被应用在服务器端。React 将返回一个HTML 字符串。你应该在服务器端使用这个方法生成HTML并且将标记放在更快的页面加载的初始请求,允许搜索引擎抓取你的网页来达到SEO(搜索引擎优化)目的。

如果你在一个已经在服务器端进行渲染的标记上的节点进行调用ReactDOM.render(),React 将阻止它并且只是绑定事件句柄,允许你有一个首次加载的性能。

renderToStaticMarkup()

1
ReactDOMServer.renderToStaticMarkup(element)

类似renderToString,除了它保护创建额外的DOM 属性例如data-reactid,React 在内部使用。这是有用的如果你想要使用React 作为一个简单的静态页面生成器,因为剥离额外的属性可以节省大量的字节。

参考文档

  1. ReactDOMServer

react ReactDOMServer的更多相关文章

  1. react项目开发入门

    v16.2.0 在html头部引入react相关js文件 <!-- react核心库--><script src="../static/react/react.produc ...

  2. React.render和reactDom.render的区别

    刚开始学习react.js.发现网上的资料,有些是写着react.render,有些写着reactDom.render.觉得很奇怪就查阅了一下资料.解释如下: 这个是react最新版api,也就是0. ...

  3. React入门--------顶层API

    React.createClass 参数:config(object) 创建一个ReactClass(组件类),参数是一个对象且必须带有render属性方法,该方法必须返回一个封闭的容器(容器内可以由 ...

  4. React同构直出原理浅析

    通常,当客户端请求一个包含React组件页面的时候,服务端首先响应输出这个页面,客户端和服务端有了第一次交互.然后,如果加载组件的过程需要向服务端发出Ajax请求等,客户端和服务端又进行了一次交互,这 ...

  5. ReactDom.render和React.render的区别

    这个是react最新版api,也就是0.14版本做出的改变.主要是为了使React能在更多的不同环境下更快.更容易构建.于是把react分成了react和react-dom两个部分.这样就为web版的 ...

  6. React Redux Sever Rendering实战

    # React Redux Sever Rendering(Isomorphic JavaScript) ![React Redux Sever Rendering(Isomorphic)入门](ht ...

  7. [转] React同构思想

    React比较吸引我的地方在于其客户端-服务端同构特性,服务端-客户端可复用组件,本文来简单介绍下这一架构思想. 出于篇幅原因,本文不会介绍React基础,所以,如果你还不清楚React的state/ ...

  8. React 在服务端渲染的实现

    原文地址:Server-Side React Rendering 原文作者:Roger Jin 译者:牧云云 React 在服务端渲染的实现 React是最受欢迎的客户端 JavaScript 框架, ...

  9. 详解react/redux的服务端渲染:页面性能与SEO

        亟待解决的疑问 为什么服务端渲染首屏渲染快?(对比客户端首屏渲染)   react客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...

随机推荐

  1. Python笔记_第一篇_面向过程_第一部分_8.画图工具(小海龟turtle)

    turtle 是一个简单的绘图工具. 提供一个小海龟,可以把它理解为一个机器人,只能听懂有限的命令,且绘图窗口的原点(0,0)在中间,默认海龟的方向是右侧海龟的命令包括三类:运动命令.笔画控制命令.其 ...

  2. HDU-1875 畅通工程再续(最小生成树+判断是否存在)

    http://acm.hdu.edu.cn/showproblem.php?pid=1875 Problem Description 相信大家都听说一个“百岛湖”的地方吧,百岛湖的居民生活在不同的小岛 ...

  3. Tomcat远程debug配置

    当我们需要定位生产环境问题,而日志又不清晰的情况下,我们可以借助Tomcat提供的远程调试,设置如下: // Linxu系统: apach/bin/startup.sh开始处中增加如下内容: decl ...

  4. android viewgrop(实现了事件监听/手动滑动)

    package com.example.myviewgroup; import android.content.Context;import android.os.Handler;import and ...

  5. Python_面试题_更新中

    Python-面试题 线上操作系统 centos py2和py3的区别 每种数据类型,列举你了解的方法 3 or 9 and 8 字符串的反转 is 和 == 的区别? git流程 v = (1) / ...

  6. idea 项目 版本控制文件

  7. jquery时间控件

    jQuery 时间控件推荐 博客分类: jQuery 时间控件   My97DatePicker  My97DatePicker是一个更全面,更人性化,并且速度一流的日期选择控件.具有强大的日期范围限 ...

  8. Windows下 webstorm安装tomcat配置svn并使用

    先附上所需要的软件的下载地址:https://pan.baidu.com/s/1c2ripd2 1.下载并安装jdk以及配置jdk的环境变量 1)下载jdk,选择安装目录安装,我选择的是默认路径,安装 ...

  9. VisualStudioAddIn2017.vsix的下载安装和使用

    本加载项是用于Visual Studio的,下载以后按照如下步骤进行安装: 完全退出Visual Studio 把下载了的文件解压缩,会产生一个VisualStudioAddIn2017.vsix文件 ...

  10. ionic2踩坑之订阅发布模式的实现

    原文地址:http://www.cnblogs.com/eccainiao/p/6429536.html 转载请说明. 在ionic2中实现订阅发布模式,需要用到Events. Events下面有三个 ...