React.render和reactDom.render的区别

原创
2016/03/14 15:42
阅读数 1W

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

展开阅读全文
打赏
3
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
3
分享
返回顶部
顶部