这个是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的用法：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <meta  charset="utf-8">
  6.     <script type="text/javascript" src="../js/react.min.js"></script>
  7.     <script type="text/javascript" src="../js/react-dom.min.js"></script>
  8.     <script type="text/javascript" src="../js/browser.min.js"></script>
  9. </head>
  10. <body>
  11. <div id="a"></div>
  12.  
  13. <script type="text/babel">
  14.     ReactDOM.render(
  15.     <h1>React入门教程</h1>,
  16.     document.getElementById("a")
  17. );
  18. </script>
  19. </body>

React.render的用法：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <meta  charset="utf-8">
  6.     <script type="text/javascript" src="../js/react.min.js"></script>
  7.     <script type="text/javascript" src="../js/react-dom.min.js"></script>
  8.     <script type="text/javascript" src="../js/browser.min.js"></script>
  9. </head>
  10. <body>
  11. <div id="a"></div>
  12.  
  13. <script type="text/babel">
  14.     React.render(<h1>React入门教程</h1>,document.getElementById("a"));
  15. </script>
  16. </body>
  17. </html>

ReactDom.render和React.render的区别的更多相关文章

  1. React.render和reactDom.render的区别

    刚开始学习react.js.发现网上的资料,有些是写着react.render,有些写着reactDom.render.觉得很奇怪就查阅了一下资料.解释如下: 这个是react最新版api,也就是0. ...

  2. React render algorithm & Fiber vs Stack

    React render algorithm & Fiber vs Stack React 渲染算法 & Fiber vs Stack https://stackoverflow.co ...

  3. React Render Callback Pattern(渲染回调模式)

    React Render Callback Pattern,渲染回调模式,其实是将this.props.children当做函数来调用. 例如: 要根据user参数确定渲染Loading还是Profi ...

  4. React render twice bug

    React render twice bug React bug constructor render twice bug update render twice bug StrictMode htt ...

  5. react render

    实际上react render方法返回一个虚拟dom 并没有去执行渲染dom 渲染的过程是交给react 去完成的 这就说明了为什么要在所有数据请求完成后才去实现render 这样做也提高了性能.只调 ...

  6. ASP.NET MVC 4 RC的JS/CSS打包压缩功能 Scripts.Render和Styles.Render

    打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载多个文件案才能完成网页显示的延迟感,同时通过移除JS/CSS ...

  7. mvc中Scripts.Render、Styles.Render

    一.配置BundleConfig.cs文件 1.首先要在App_Start 里面BundleConfig.cs 文件里面 添加要包含的css文件 2.BundleConfig就是一个微软新加的 一个打 ...

  8. MVC 中Scripts.Render、Styles.Render

    在ASP.NET MVC项目中,可以在视图中利用Scripts.Render.Styles.Render统一加载js.css文件,需要利用BundleConfig类来Add 各种Bundle,例如:b ...

  9. vue和react之间的区别

    1.Vue和React之间的区别 相同点: Vue和其他框架一样,都有组件开发和虚拟dom 都支持props进行父子组件之间的数据通信 都支持数据驱动视图,不直接操作真实dom 都支持服务器端的 渲染 ...

随机推荐

  1. tomcat 6.0.44 “has failed to stop it. This is very likely to create a memory leak” 问题调查

    1. 问题起因 我们项目中缓存模块某个实现采用了ehcache(2.4.3),当项目部署到tomcat中后,对tomcat做停止服务操作(点击eclipse的console红色的停止按钮,奇怪的是有小 ...

  2. Struts2上传图片时报404错误

    可能是struts配置文件中定义的拦截器导致的,后缀拦截导致,将该拦截器去掉,在action类里判断后缀 public String upload()throws Exception{ ActionC ...

  3. java.net.BindException: Address already in use: JVM_Bind

    是端口占用,如果修改端口后仍提示这样的错误,可能是eclipse自动关闭或正在运行服务非正常中断导致端口没有关闭,这时你再启动,还是提示java.net.BindException: Address  ...

  4. [转]EntityFramework走马观花之CRUD（中）

    学习Entity Framework技术期间查阅的优秀文章,出于以后方便查阅的缘故,转载至Blog,可查阅原文:http://blog.csdn.net/bitfan/article/details/ ...

  5. Socket 编程

  6. 最大权闭合图（Road constructions）hdu3917

    题意:给出n个城市,k条道路,每条道路都有其负责的公司和花费,m个公司来投标修路,给出m个公司承包需要交纳的赋税,如果第i个公司负责修1-->2路,第j个公司负责修2-->3路,如果选择了 ...

  7. eclipse key

    让我们按照使用频率来看看我最爱用的一些热键组合.(注:以下内容在Eclipse3.02及一上版本通过测试) . Control-Shift-T: 打开类型(Open type).如果你不是有意磨洋工, ...

  8. git批量删除分支

    要删除本地,首先要考虑以下三点 列出所有本地分支 搜索目标分支如:所有含有'dev'的分支 将搜索出的结果传给删除函数 所以我们可以得到: git br |grep 'dev' |xargs git ...

  9. html5文件上传

    <!DOCTYPE html><html><head> <title>Html5 Ajax 上传文件</title></head> ...

  10. redis数据库使用测试

    注:java spring data redis内置了几种redis序列化机制.JdkSerializationRedisSerializer最高效.有关序列化更详细的介绍-http://www.my ...