刚开始学习react.js。发现网上的资料，有些是写着react.render，有些写着reactDom.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的用法：

<!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>

</html>

React的用法：

<!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>
 

官网更多详细解析参照：https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html

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

  1. React源码 ReactDOM.render

    在 react 当中,主要创建更新的有三种方式 1.ReactDOM.render || hydrate  这两个api都是要把这个应用第一次渲染到我们页面上面,展现出来整个应用的样子的过程,这就是初 ...

  2. React入门介绍（1）-ReactDOM.render()等基础

    React入门介绍-ReactDOM.render()等基础 首先,React是一个用于构建用户界面的Javascript库,但Peact并不是一套完整的MVC或MVVM的框架,它仅涵盖V-view视 ...

  3. ReactDom.render和React.render的区别

    这个是react最新版api,也就是0.14版本做出的改变.主要是为了使React能在更多的不同环境下更快.更容易构建.于是把react分成了react和react-dom两个部分.这样就为web版的 ...

  4. React js ReactDOM.render 语句后面不能加分号

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  5. React16源码解读：揭秘ReactDOM.render

    引言 在上一篇文章中我们通过create-react-app脚手架快速搭建了一个简单的示例,并基于该示例讲解了在类组件中React.Component和React.PureComponent背后的实现 ...

  6. React.createClass和extends Component的区别

    React.createClass和extends Component的区别主要在于: 语法区别 propType 和 getDefaultProps 状态的区别 this区别 Mixins 语法区别 ...

  7. 浅析angular，react，vue.js jQuery使用区别

    前端越来越混乱了,当然也可以美其名曰:繁荣.当新启动一个前端项目,第一件事就是纠结:使用什么框架,重造什么轮子? PS:大牛留言讨论那么,希望看完此篇,能够给你一个清晰的认识,或者让你更加地纠结和无所 ...

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

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

  9. mvc中Scripts.Render、Styles.Render

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

随机推荐

  1. 【AR实验室】ARToolKit之制作自己的Marker/NFT

    0x00 - 前言 看过example后,就会想自己动动手,这里改改那里修修.我们先试着添加自己喜欢的marker/nft进行识别. 比如我做了一个法拉利的marker: 还有网上找了一个法拉利log ...

  2. 关于 Chrome 浏览器中 onresize 事件的 Bug

    我在写插件时用到了 onresize 事件,在反复地测试后发现该事件在 Chrome 及 Opera(内核基本与 Chrome 相同,以下统称 Chrome)浏览器打开时就会执行,这种情况也许不能算作 ...

  3. 原生javascript 固定表头原理与源码

    我在工作中需要固定表头这个功能,我不想去找,没意思.于是就写了一个,我写的是angularjs 自定义指令 起了个 "fix-header" ,有人叫  "freeze- ...

  4. StatePattern(状态模式)

    /** * 状态模式 * @author TMAC-J * 状态模式和策略模式很像,其实仔细研究发现完全不一样 * 策略模式各策略之间没有任何关系,独立的 * 状态模式各状态之间接口方法都是一样的 * ...

  5. 【JS基础】循环

    for 循环的语法: for (语句 1; 语句 2; 语句 3) { 被执行的代码块 } 语句 1 在循环(代码块)开始前执行 语句 2 定义运行循环(代码块)的条件 语句 3 在循环(代码块)已被 ...

  6. iOS 后台处理

    iOS 后台处理的常见用途 1.进入后台时候删除资源:应用处于挂起状态的时候所占用的资源越少,该应用被iOS终止的风险就越低.通过从内存中清理那些易于重新创建的资源,可以增加应用驻留内存的机会,因此可 ...

  7. Linux设备管理（二）_从cdev_add说起

    我在Linux字符设备驱动框架一文中已经简单的介绍了字符设备驱动的基本的编程框架,这里我们来探讨一下Linux内核(以4.8.5内核为例)是怎么管理字符设备的,即当我们获得了设备号,分配了cdev结构 ...

  8. 项目游戏开发日记 No.0x00000

    14软二杨近星(2014551622) ---恢复内容开始--- 2016-03-17 从开始迈进软件工程专业, 已经快两年了, 记得当初选择软件的理由是, 我要学去做东西, 我享受开发过程. 两年来 ...

  9. VS2010 release编译下进行调试，“当前不会命中任何断点,还没有为文档加载”问题解决方案

    在release模式下调试程序,经常出现"当前不会命中任何断点,还没有为文档加载"的问题,可尝试以下方法: 1. 属性 → 配置属性 → C/C++ → 常规 → 调试信息格式:选 ...

  10. Centos 7.0 安装Mono 3.4 和 Jexus 5.6

    2013-07-26 写过一篇<CentOS 6.3下 安装 Mono 3.2 和Jexus 5.4>,CentOS 7在CentOS 6的基础上有很大的调整,本文是这篇文章的更新,主要介 ...