此文章是翻译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. 纯手撸web框架

    纯手撸web框架 一.Web应用的组成 接下来我们学习的目的是为了开发一个Web应用程序,而Web应用程序是基于B/S架构的,其中B指的是浏览器,负责向S端发送请求信息,而S端会根据接收到的请求信息返 ...

  2. UVa202

    刚刚开始写的适合感觉是转换成字符然后开始遍历一遍,后面发现各种不行,就回去看了看题目,重新构思,写了好久还是WA,最后只能看下大神的操作(我太菜了). 先简单梳理下题目意思:首先给出两个数,然后这两个 ...

  3. tomcat设置远程监听端口(linux&windows)

    1.Linxu系统: apach/bin/startup.sh开始处中增加如下内容: declare -x CATALINA_OPTS="-server -Xdebug -Xnoagent ...

  4. 18)C++对C的增强

    在C++中所有的变量都必须有类型,但是在C语言中没有这个要求,C语言中的默认类型在C++中不合法, #include<stdio.h> f() { ; } int main() { int ...

  5. gitlab安装教程

    gitlab安装教程     安装教程 官网安装方法 https://about.gitlab.com/downloads/#centos7 1.准备 sudo yum install curl po ...

  6. 一篇文章带你了解axios网络交互-Vue

    来源:滁州SEO 1 **什么是axios呢?**了解,并去使用它,对于axios发送请求的两种方式有何了解,以及涉及axios跨域问题如何解决. 对于axios网络交互,去使用axios的同时,首先 ...

  7. JavaScript 的 URL 对象是什么?

    如果我们自己编写从URL中分析和提取元素的代码,那么有可能会比较痛苦和麻烦.程序员作为这个社会中最“懒”的群体之一,无休止的重复造轮子必然是令人难以容忍的,所以大多数浏览器的标准库中都已经内置了URL ...

  8. 关于 Xpath 定位

    关于 Xpath 定位 问: // 和 / 的区别 表达式 描述 nodename 选取此节点的所有子节点. / 从根节点选取. // 从匹配选择的当前节点选择文档中的节点,而不考虑它们的位置. . ...

  9. Regex: positive lookahead 先行断言____ 后行断言(lookbehind)

    先行断言: /a(?=b)/  ,positive lookahead,a的后方必须是b才行 /a(?!b)/   ,negative lookahead,a的后方必须不是b才能匹配 如下图示:  来 ...

  10. VirtualBox虚拟机安装

    目录 安装前准备 1.开始安装,安装很简单,直接上图 2.设置全局路径,这里主要是方便以后创建虚拟机的时候不用每次都去选择存放位置,默认是存放到C盘 安装前准备 系统:Windows 10 专业版 软 ...