React.render和reactDom.render的区别

时间  2019-11-17
标签 react.render react render reactdom.render reactdom 区别 栏目 React 繁體版
原文   原文链接

刚开始学习react.js。发现网上的资料，有些是写着react.render，有些写着reactDom.render.以为很奇怪就查阅了一下资料。解释以下：javascript

这个是react最新版api，也就是0.14版本作出的改变。主要是为了使React能在更多的不一样环境下更快、更容易构建。因而把react分红了react和react-dom两个部分。这样就为web版的react和移动端的React Native共享组件铺平了道路。也就是说咱们能够跨平台使用相同的react组件。html

新的react包包含了React.createElement，.createClass，.Component，.PropTypes，.children以及其余元素和组件类。这些都是你须要构建组件时助手。 java

而react-dom包包括ReactDOM.render，.unmountComponentAtNode和.findDOMNode。在 react-dom/server ，有ReactDOMServer.renderToString和.renderToStaticMarkup服务器端渲染支持。react

总的来讲，二者的区别就是：ReactDom是React的一部分。ReactDOM是React和DOM之间的粘合剂，通常用来定义单一的组件，或者结合ReactDOM.findDOMNode（）来使用。更重要的是ReactDOM包已经容许开发者删除React包添加的非必要的代码，并将其移动到一个更合适的存储库。git

ReactDOM的用法：github

<!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的用法：web

<!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.htmlapi

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程