React.render和reactDom.render的区别
2016-09-09 · 做真实的自己 用良心做教育
千锋教育
千锋教育专注HTML5大前端、JavaEE、Python、人工智能、UI＆UE、云计算、全栈软件测试、大数据、物联网+嵌入式、Unity游戏开发、网络安全、互联网营销、Go语言等培训教育。
向TA提问
关注
![]()
展开全部
这个是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>
成了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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
