文档章节

React.render和reactDom.render的区别

LuckyWinty
 LuckyWinty
发布于 2016/03/14 15:42
字数 438
阅读 9589
收藏 0

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

© 著作权归作者所有

LuckyWinty
粉丝 10
博文 24
码字总数 32476
作品 0
广州
前端工程师
私信 提问
从零开始学React(1)——HelloWorld

一,React是什么 React只是一个javascript 库,只不过它是facebook公司编写并发布的。 React 起源于 Facebook 的内部项目,因为 FB 对市场上所有 JavaScript MVC 框架,都不满意,就决定自己...

筱飞
2016/05/16
191
0
玩转 React【第02期】:恋上 React 模板 JSX

往期回顾 前文中我们讲解了利用 ReactElement 来编写React程序,但是我们也看到这种方式编写 React 特别的麻烦,而且层级结构特别不清晰。今天我们来看一种优雅的编写React的代码的一种方式 ...

我的卡
2018/10/31
10
0
React源码解析之ReactDOM.render()

一、React更新的方式有三种: (1)ReactDOM.render() || hydrate(ReactDOMServer渲染) (2)setState (3)forceUpdate 接下来,我们就来看下源码 二、ReactDOM.render(element, containe...

进击的小进进
08/14
0
0
React特性精华

以下内容是我在学习和研究React时,对React的特性、重点和注意事项的提取、精练和总结,可以做为React特性的字典,方便大家查阅; 目录 内容 1. 性能优化 虽然 props 由React本身设置以及 st...

科研者
2017/10/07
0
0
react 12个实用demo(来自github)

1.Hello, world! 2.遍历数组 3.数组渲染 4.属性值传递 5.子元素传递 6.属性类型限制 7.事件 8.利用state制作LikeButton 9.利用state制作input 10.定时器 11.与jquery配合实现ajax 12.利用sta...

WolfX
2016/02/28
198
0

没有更多内容

加载失败,请刷新页面

加载更多

查看线上日志常用命令

cat 命令(文本输出命令) 通常查找出错误日志 cat error.log | grep 'nick' , 这时候我们要输出当前这个日志的前后几行: 显示file文件里匹配nick那行以及上下5行 cat error.log | grep -C ...

xiaolyuh
30分钟前
5
0
六、Java设计模式之工厂方法

工厂方法定义: 定义一个创建对象的接口,但让实现这个接口的类来决定实例化哪个类,工厂方法让类的实例化推迟到子类中进行 类型:创建型 工厂方法-使用场景: 创建对象需要大量重复的代码 ...

东风破2019
36分钟前
5
0
win服务器管理遇到的一系列问题记录

有些小伙伴在使用iis7远程桌面管理工具的时候总是会遇到一系列的问题,下面就是为大家介绍一下服务器日常管理过程中出现的问题及我的解决办法和心得。希望能帮到大家。   拒绝服务器重新启...

1717197346
44分钟前
6
0
flutter 剪切板 复制粘贴

复制粘贴功能 import 'package:flutter/services.dart'; Clipboard.setData(ClipboardData(text:_text));Clipboard.getData;...

zdglf
46分钟前
4
0
如何保证消息的可靠性传输?或者说,如何处理消息丢失的问题?

面试题 如何保证消息的可靠性传输?或者说,如何处理消息丢失的问题? 面试官心理分析 这个是肯定的,用 MQ 有个基本原则,就是数据不能多一条,也不能少一条,不能多,就是前面说的重复消费...

米兜
47分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部