React.render和reactDom.render的区别

Stella981
• 阅读 641

这个是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

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
2年前
03. react 初次见面
    与浏览器的DOM元素不同,React当中的元素事实上是普通的对象,ReactDOM可以确保浏览器DOM的数据内容与React元素保持一致。1、将元素渲染到DOM中    首先我们在一个HTML页面中添加一个id"root" 的<div:<divid"root"
Stella981 Stella981
2年前
React16.4 开发简书项目 从零基础入门到实战
第1章课程导学本章主要介绍学习react的重要性,课程的知识大纲,学习前提,讲授方式及预期收获。11课程导学第2章React初探本章主要讲解React项目的开发环境搭建,工程代码结构及React中最基础的语法内容,同时对前端组件化思想进行介绍。21React简介22React开发环境准备23工程目录
Stella981 Stella981
2年前
React的单向数据流与组件间的沟通
今天来给大家总结下React的单向数据流与组件间的沟通。首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则。先介绍单向数据流吧。React单向数据流:React是单向数据流,数据主要从父节点传递到子节点(通过props)。如果顶层(父级)的某个props改变了,React会重渲染所有的子节点。刚才我们提到了
Stella981 Stella981
2年前
React与Vue的相同与不同点
我们知道JavaScript是世界上最流行的语言之一,React和Vue是JS最流行的两个框架。所以要想前端的开发那么必须掌握好这两个框架。那么这两个框架有什么不同呢?React和Vue相同之处,它们都有:使用VirtualDOM提供了响应式(Reactive)和组件化(Composable)的视图组件
韦康 韦康
3星期前
React18+TS+NestJS+GraphQL 全栈开发在线教育平台
React18TSNestJSGraphQL全栈开发在线教育平台download》quangneng.com/163/React18TSNestJSGraphQL全栈开发在线教育平台的构建技术选型React18作为前端框架,提供了丰富的组件和强
黄忠 黄忠
4个月前
2023版Web前端架构师(无密)
2023版Web前端架构师(无密)downloadsisuoit.com/4479.html01长处React相对杰出的优势主要有:1、活络性:React没有像Angular和Vue那样强制要求运用特定的架构和方式。开发者能够依照自己的需求来规划组件和架构
Python进阶者 Python进阶者
3个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
贾蓁 贾蓁
2个月前
React源码深度解析 高级前端工程师必备技能
React源码深度解析高级前端工程师必备技能download》http://quangneng.com/518/React源码深度解析:深度理解React源码是高级前端工程师的重要技能之一。这包括对React的虚拟DOM实现、组件生命周期、状态管理、调度和
程昱 程昱
1个月前
React18+Next.js13+TS,B端+C端完整业务+技术双闭环 完结无密
React18Next.js13TS,B端C端完整业务技术双闭环完结无密download》quangneng.com/173/React18Next.js13TS的介绍React18和Next.js13是两个最新版本的前端开发工具,它们提供了许