React.render和reactDom.render的區別


剛開始學習react.js。發現網上的資料,有些是寫着react.render,有些寫着reactDom.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的用法:

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM