React.render和reactDom.render的区别

Stella981 等级 235 0 0
标签: reactdom

这个是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 之Virtual DOM 及内核
什么是 Virtual DOM?Virtual DOM 是一种编程概念。在这个概念里, UI 以一种理想化的,或者说“虚拟的”表现形式被保存于内存中,并通过如 ReactDOM 等类库使之与“真实的” DOM 同步。这一过程叫做。这种方式赋予了 React 声明式的 API:您告诉 React 希望让 UI 是什么状态,React 就确保 DOM 匹
03. react 初次见面
    与浏览器的 DOM 元素不同,React 当中的元素事实上是普通的对象,React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。 1、将元素渲染到 DOM 中 --------------     首先我们在一个 HTML 页面中添加一个 id="root" 的 <div>: <div id="root">
06. react 初次见面
    React 元素的事件处理和 DOM元素的很相似。但是有一点语法上的不同: * React事件绑定属性的命名采用驼峰式写法,而不是小写。 * 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法)     例如,传统的 HTML: <button onclick="activateLas
Nerv
![](https://oscimg.oschina.net/oscnet/1adc9f3b5b42317562590c398e4f3cce7d7.jpg) Nerv 是一款由京东凹凸实验室打造的高性能类 React 前端框架。目前已广泛运用在京东商城(JD.COM)核心业务及TOPLIFE全站。Nerv 基于React标准,使用 Virtual Dom
React Hook
用React Hook写一个简单的登录表单示例,两种方式: 第一种: import React, { useState } from "react"; import ReactDOM from "react-dom"; function LoginForm() { const [username, setUsern
React Portals
Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。常见场景:对话框、悬浮卡以及提示框! 定义一个 模态框组件: import React, { useRef, useEffect, } from 'react'; import ReactDOM from 'react-do
React 入门及学习笔记
React 构建用户界面的JavaScript库,主要用于构建UI界面。Instagram,2013年开源。 特点: --- 1. 声明式的设计 2. 高效,采用虚拟DOM来实现DOM的渲染,最大限度的减少DOM的操作。 3. 灵活,跟其他库灵活搭配使用。 4. JSX,俗称JS里面写HTML,JavaScript语法的扩展。 5. 组件化,模
React 服务端渲染完美的解决方案
最近在开发一个服务端渲染工具,通过一篇小文大致介绍下服务端渲染,和服务端渲染的方式方法。在此文后面有两中服务端渲染方式的构思,根据你对服务端渲染的利弊权衡,你会选择哪一种服务端渲染方式呢? 什么是服务器端渲染 --------- 使用 React 构建客户端应用程序,默认情况下,可以在浏览器中输出 React 组件,进行生成 DOM 和操作 DOM。Re
React.render和reactDom.render的区别
这个是react最新版api,也就是0.14版本做出的改变。主要是为了使React能在更多的不同环境下更快、更容易构建。于是把react分成了react和react-dom两个部分。这样就为web版的react和移动端的React Native共享组件铺平了道路。也就是说我们可以跨平台使用相同的react组件。  新的react包包含了React.crea
React应用渲染界面的入口
jsx代码: var React = require('react'); var ReactDOM = require('react-dom'); var MyButtonController = require('./components/MyButtonController'); ReactDOM.render
React的虚拟DOM
上一篇文章中,DOM树的信息可以用JavaScript对象来表示,反过来,可以根据这个用JavaScript对象表示的树结构来真正构建一颗DOM树。 用JavaScript对象表示DOM信息和结构,当状态变更的时候,重新渲染这个JavaScript的对象结构,当然这样做,其实并没有更新到真正的页面上。 但是可以用新渲染的对象树和旧的树进行对比,记录这两棵树
React篇(005)
答案: 1、**React 速度很快**:它并不直接对 DOM 进行操作,引入了一个叫做虚拟 DOM 的概念,安插在 javascript 逻辑和实际的 DOM 之间,性能好。 2、**跨浏览器兼容**:虚拟DOM帮助我们解决了跨浏览器问题,它为我们提供了标准化的 API,甚至在 IE8 中都是没问题的。 3、**一切都是 co
React重点概要
****JSX语法:**** 1.ReactDOM.render:用于将模板转换为HTML语言,并插入指定的DOM节点;  语法规则:遇到 HTML 标签(以 `<` 开头),就用 HTML 规则解析,HTML 语言直接写在 JavaScript 语言之中,不加任何引号 <div id="example"></div> <sc
React:react
使用react构建单页面应用:   实现方法:(1)react-router        (2)react-router-dom `react-router`: 实现了路由的核心功能,而react-router-dom依赖react-router, `react-router-dom`: 基于`react-router`,加入了在浏览器运行环境下的
阿里巴巴前端练习生学习笔记
字符串引擎和Javascript引擎的区别:是否对于DOM进行全部改变? 相关资料链接• Wiki MVC • Wiki MVVM • Mustach • Handlebars • React • Angular • Vue • Bootstrap • Ant Design • Fusion Des