react ReactDOMServer
此文章是翻译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 作为一个简单的静态页面生成器,因为剥离额外的属性可以节省大量的字节。
参考文档
react ReactDOMServer的更多相关文章
- react项目开发入门
v16.2.0 在html头部引入react相关js文件 <!-- react核心库--><script src="../static/react/react.produc ...
- React.render和reactDom.render的区别
刚开始学习react.js.发现网上的资料,有些是写着react.render,有些写着reactDom.render.觉得很奇怪就查阅了一下资料.解释如下: 这个是react最新版api,也就是0. ...
- React入门--------顶层API
React.createClass 参数:config(object) 创建一个ReactClass(组件类),参数是一个对象且必须带有render属性方法,该方法必须返回一个封闭的容器(容器内可以由 ...
- React同构直出原理浅析
通常,当客户端请求一个包含React组件页面的时候,服务端首先响应输出这个页面,客户端和服务端有了第一次交互.然后,如果加载组件的过程需要向服务端发出Ajax请求等,客户端和服务端又进行了一次交互,这 ...
- ReactDom.render和React.render的区别
这个是react最新版api,也就是0.14版本做出的改变.主要是为了使React能在更多的不同环境下更快.更容易构建.于是把react分成了react和react-dom两个部分.这样就为web版的 ...
- React Redux Sever Rendering实战
# React Redux Sever Rendering(Isomorphic JavaScript) ![React Redux Sever Rendering(Isomorphic)入门](ht ...
- [转] React同构思想
React比较吸引我的地方在于其客户端-服务端同构特性,服务端-客户端可复用组件,本文来简单介绍下这一架构思想. 出于篇幅原因,本文不会介绍React基础,所以,如果你还不清楚React的state/ ...
- React 在服务端渲染的实现
原文地址:Server-Side React Rendering 原文作者:Roger Jin 译者:牧云云 React 在服务端渲染的实现 React是最受欢迎的客户端 JavaScript 框架, ...
- 详解react/redux的服务端渲染:页面性能与SEO
亟待解决的疑问 为什么服务端渲染首屏渲染快?(对比客户端首屏渲染) react客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...
随机推荐
- 哈夫曼编码的理解(Huffman Coding)
哈夫曼编码(Huffman Coding),又称霍夫曼编码,是一种编码方式,可变字长编码(VLC)的一种.Huffman于1952年提出一种编码方法,该方法完全依据字符出现概率来构造异字头的平均长度最 ...
- ReportingService语法
="Dear All:"& vbcrlf & vbcrlf & IIF(First(Fields!ProductFamily.Value, "bc ...
- SQL触发器笔记
触发器(Trigger)是在对表进行插入.更新.删除等操作时自动执行的存储过程. 触发器是一种特殊的存储过程,它在执行语言事件时自动生效,采用事件驱动机制.当某个触发事件发生时,定义在触发器中的功能将 ...
- 四十、LAMP与LNMP加速与缓存优化进阶实战上部
实例: 一. 所有服务器配置定时时间同步,必须通过web server上网. 有两种方式: 1.服务器A能进行上网,作为web server ,通过指定为ntp服务器,所有服务器访问这个服务器 2.服 ...
- (vshadow)Volume Shadow在渗透测试中的利用
本文根据嘶吼学习总结出文中几种方式Vshadow包含在window SDK中,由微软签名. Vshadow包括执行脚本和调用支持卷影快照管理的命令的功能,这些功能可能会被滥用于特权级的防御规避,权限持 ...
- RSAUtils加密解密
import org.apache.commons.codec.binary.Base64; import org.apache.commons.io.IOUtils; import javax.cr ...
- 2019-ECfinal-M题-value
题目传送门 sol:每个下标都有选和不选两种情况,所以总方案数是$2^{n}$,在$n$最大是$100000$的情况下不符合要求.可以这样想,假设$i^{p}=k$有符合题目要求的解,还有一个整数$j ...
- 吴裕雄--天生自然python学习笔记:python 用pygame模块动画一让图片动起来
动画是游戏开发中不可或缺的要素,游戏中的角色只有动起来才会拥有“生命”, 但动画处理也是最让游戏开发者头痛的部分.Pygame 包通过不断重新绘制绘图窗口,短短几行代码就可以让图片动起来! 动画处理程 ...
- Django线上部署实战教程之Nginx+Gunicorn+Django篇
############################################# 推荐 nginx supervisor gunicorn 配置简单,运维方便. Nginx (engi ...
- 分类算法之KNN分类
1.介绍 KNN是k nearest neighbor 的简称,即k最邻近,就是找k个最近的实例投票决定新实例的类标.KNN是一种基于实例的学习算法,它不同于贝叶斯.决策树等算法,KNN不需要训练,当 ...