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是一个单页面应用,大多数的资源需要在首次渲染前就加载 ...
随机推荐
- 有关iOS热更新
iOS热更新的几篇文章,看完这几篇,自己集成一下.下面说一下我集成时遇到的问题. 这是原作者的JSPatch的讲解的文章:<JSPatch – 动态更新iOS APP>.<JSPat ...
- opencv处理图像
import cv2 import numpy import os img = numpy.zeros((3, 3), dtype=numpy.uint8) print(img) img = cv2. ...
- MRP运算报错-清除预留
MRP运算报错-清除预留
- Linux基础篇五:文件操作篇(三剑客)
cut截取字段: -d 指定分割符 -f 指定第几列 例题1: echo "i am dusonglin ,my qq is 380343680 " >dusongl ...
- [LC] 124. Binary Tree Maximum Path Sum
Given a non-empty binary tree, find the maximum path sum. For this problem, a path is defined as any ...
- LeetCode No.76,77,78
No.76 MinWindow 最小覆盖子串 题目 给你一个字符串 S.一个字符串 T,请在字符串 S 里面找出:包含 T 所有字母的最小子串. 示例 输入: S = "ADOBECODEB ...
- 学习python-20191208(2)-Python Flask高级编程开发鱼书_第03章_数据与flask路由
视频06: 定义静态方法的两种方式: 1.在方法上方加上装饰@staticmethod 2.在方法上方加上装饰@classmethod 方法中要加参数cls 如:def search_by_isb ...
- python后端面试第二部分:网络编程和并发编程--长期维护
1. 简述 OSI 七层协议. 2. 什么是C/S和B/S架构? 3. 简述 三次握手.四次挥手的流程. 4. 什么是arp协议? 5. TCP和UDP的区别? 6. 什么是局域网和广域网? 7. 为 ...
- django框架进阶-form组件-长期维护
################## form组件做了什么事情? ####################### 之前web开发的模式,以注册为例 1,要有一个注册页面,然后有一个f ...
- leaflet加载各种地图
Leaflet调用各种地图的功能十分复杂,幸好有leaflet.ChineseTmsProviders这个插件,这四种地图直接就可以加载进来,十分方便. 下面是我做的例子: <!DOCTYPE ...