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教程