ReactDom.render和React.render的区别
这个是react最新版api,也就是0.14版本做出的改变。主要是为了使React能在更多的不同环境下更快、更容易构建。于是把react分成了react和react-dom两个部分。这样就为web版的react和移动端的React Native共享组件铺平了道路。也就是说我们可以跨平台使用相同的react组件。
新的react包包含了React.createElement,.createClass,.Component,.PropTypes,.children以及其他元素和组件类。这些都是你需要构建组件时助手。
而react-dom包包括ReactDOM.render,.unmountComponentAtNode和.findDOMNode。在 react-dom/server
,有ReactDOMServer.renderToString和.renderToStaticMarkup服务器端渲染支持。
总的来说,两者的区别就是:ReactDom是React的一部分。ReactDOM是React和DOM之间的粘合剂,一般用来定义单一的组件,或者结合ReactDOM.findDOMNode()来使用。更重要的是ReactDOM包已经允许开发者删除React包添加的非必要的代码,并将其移动到一个更合适的存储库。
ReactDOM.render的用法:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="../js/react.min.js"></script>
<script type="text/javascript" src="../js/react-dom.min.js"></script>
<script type="text/javascript" src="../js/browser.min.js"></script>
</head>
<body>
<div id="a"></div> <script type="text/babel">
ReactDOM.render(
<h1>React入门教程</h1>,
document.getElementById("a")
);
</script>
</body>
React.render的用法:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="../js/react.min.js"></script>
<script type="text/javascript" src="../js/react-dom.min.js"></script>
<script type="text/javascript" src="../js/browser.min.js"></script>
</head>
<body>
<div id="a"></div> <script type="text/babel">
React.render(<h1>React入门教程</h1>,document.getElementById("a"));
</script>
</body>
</html>
ReactDom.render和React.render的区别的更多相关文章
- React.render和reactDom.render的区别
刚开始学习react.js.发现网上的资料,有些是写着react.render,有些写着reactDom.render.觉得很奇怪就查阅了一下资料.解释如下: 这个是react最新版api,也就是0. ...
- React render algorithm & Fiber vs Stack
React render algorithm & Fiber vs Stack React 渲染算法 & Fiber vs Stack https://stackoverflow.co ...
- React Render Callback Pattern(渲染回调模式)
React Render Callback Pattern,渲染回调模式,其实是将this.props.children当做函数来调用. 例如: 要根据user参数确定渲染Loading还是Profi ...
- React render twice bug
React render twice bug React bug constructor render twice bug update render twice bug StrictMode htt ...
- react render
实际上react render方法返回一个虚拟dom 并没有去执行渲染dom 渲染的过程是交给react 去完成的 这就说明了为什么要在所有数据请求完成后才去实现render 这样做也提高了性能.只调 ...
- ASP.NET MVC 4 RC的JS/CSS打包压缩功能 Scripts.Render和Styles.Render
打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载多个文件案才能完成网页显示的延迟感,同时通过移除JS/CSS ...
- mvc中Scripts.Render、Styles.Render
一.配置BundleConfig.cs文件 1.首先要在App_Start 里面BundleConfig.cs 文件里面 添加要包含的css文件 2.BundleConfig就是一个微软新加的 一个打 ...
- MVC 中Scripts.Render、Styles.Render
在ASP.NET MVC项目中,可以在视图中利用Scripts.Render.Styles.Render统一加载js.css文件,需要利用BundleConfig类来Add 各种Bundle,例如:b ...
- vue和react之间的区别
1.Vue和React之间的区别 相同点: Vue和其他框架一样,都有组件开发和虚拟dom 都支持props进行父子组件之间的数据通信 都支持数据驱动视图,不直接操作真实dom 都支持服务器端的 渲染 ...
随机推荐
- Python之配置文件模块 ConfigParser
写项目肯定用的到配置文件,这次学习一下python中的配置文件模块 ConfigParser 安装就不说了,pip一下即可,直接来个实例 配置文件 project.conf [db] host = ' ...
- django apache 通过wsgi部署
生产上部署django 1. 修改settings关闭debug DEBUG = False ALLOWED_HOSTS = ['*'] 2. 安装wsgi yum -y install mod_ws ...
- wampserver,eclipse,PHPeclipse搭建php开发环境
使用wampserver,安装wampserver后: 1,)进入mysql console,修改mysql密码: 2,) 修改D:\wamp\apps\phpmyadmin3.4.10.1\conf ...
- SC-控制Windows服务的命令
Windows自带一个控制服务的命令-SC,下面用Terminal Service做个简单例子: 查询Terminal Service的配置 C:\Users\jackie.chen>sc qc ...
- Postgres数据库基本介绍
最近一直在做一个和PostgreSQL数据库相关的项目,把自己在这个过程中学习的知识记录下来.关于PostgreSQL数据库网上已经有太多的相关介绍了,为了博文的系统性还是先看一下维基百科对Postg ...
- poj 1731 Orders
http://poj.org/problem?id=1731 Orders Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 9 ...
- DO.NET操作数据库
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- 2013年各大小IT公司待遇
2013年各大小IT公司待遇(初版 摘自好网)本人西电硕士,根据今年找工作的情况以及身边同学的汇总,总结各大公司的待遇如下,吐血奉献给各位学弟学妹,公司比较全,你想去的公司不在这里面,基本上是无名 ...
- demo15 AlertDialog
Dialog dialog = new AlertDialog.Builder(this).setTitle("对话框").setMessage("this is msg ...
- Android 优秀UI控件 ---- FlowingDrawer
1,前天在git上看到了一个不错的控件 ,最近两天项目也没有那么赶了,就抽时间来写写代码,锻炼一下手感,先看一下效果吧. 2 整体来看 ,主要是有两块来实现的,①主界面的RecyclerView ,② ...