zoukankan      html  css  js  c++  java
  • ReactDom.render和React.render的区别

    这个是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.render的用法:

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

    React.render的用法:

    <!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>
  • 相关阅读:
    StreamBox Ripper 将rm转mp3时候出现g2支持的问题
    网上英语学习资源大整理
    516 find
    怎样使孩子愿意学习
    Oracle日期函数
    Create PR/PO 以后Status的变化
    销售到出仓所经历的表
    UTL_FILE 的用法
    Oracle EBS常用数据表
    我的blog今日开园
  • 原文地址:https://www.cnblogs.com/TTTK/p/6126352.html
Copyright © 2011-2022 走看看