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客户端渲染的一大痛点就是首屏渲染速度慢问题,因为react是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...
随机推荐
- B-树与B+树 两者的区别
一个m阶的B树具有如下几个特征: 根结点至少有两个子女. 每个中间节点都包含k-1个元素和k个孩子,其中 m/2 <= k <= m 每一个叶子节点都包含k-1个元素,其中 m/2 < ...
- goweb- session和数据存储
session和数据存储 Web开发中一个很重要的议题就是如何做好用户的整个浏览过程的控制,因为HTTP协议是无状态的,所以用户的每一次请求都是无状态的,我们不知道在整个Web操作过程中哪些连接与该用 ...
- 第04项目:淘淘商城(SpringMVC+Spring+Mybatis)【第十天】(单点登录系统实现)
https://pan.baidu.com/s/1bptYGAb#list/path=%2F&parentPath=%2Fsharelink389619878-229862621083040 ...
- Codeforces 1292A/1293C - NEKO's Maze Game
题目大意: 有一个2*n的图 NEKO#ΦωΦ要带领mimi们从(1,1)的点走到(2,n)的点 每次会操作一个点,从可以通过到不可以通过,不可以通过到可以通过 每操作一次要回答一次NEKO#ΦωΦ能 ...
- ant design for vue 上传文件
1.使用customRequest customRequest 通过覆盖默认的上传行为,可以自定义自己的上传实现 Function 定义customRequest,之前定义action行为会被覆盖,可 ...
- CSS样式表------第一章:样式表的基本概念
CSS(Cascading Style Sheets,层叠样式表),控制页面样式外观,作用是美化HTML网页. 一. 样式表的基本概念 1.样式表的分类 (1)内联样式表 -----放在元素的开始标 ...
- Listening-lecture|主旨题|术语解释|举例原则|Crash course 哔哩哔哩
Listening-lecture: Major topic: SP1---detail---detail---detail SP2---detail---detail---detail Crash ...
- 1059 C语言竞赛 (20 分)
题目:1059 C语言竞赛 (20 分) C 语言竞赛是浙江大学计算机学院主持的一个欢乐的竞赛.既然竞赛主旨是为了好玩,颁奖规则也就制定得很滑稽: 0.冠军将赢得一份“神秘大奖”(比如很巨大的一本学生 ...
- 奇点云 x 阿里云 | 联合发布综合体数字化转型与数据创新解决方案
2019年7月25日下午,在阿里云峰会上海站,奇点云入选阿里云首批联合解决方案合作伙伴,并联合发布了“综合体数字化转型与数据创新解决方案”,共同探索综合体的智能服务. 关于综合体的数字化转型,奇点云联 ...
- HTML5 Fundamental Syntax
HTML5 Fundamental Syntax */--> HTML5 Fundamental Syntax 1 Adding Document Structure with HTML5's ...