ReactDom.render和React.render的区别

时间：2024-01-07 19:45:50

这个是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>

相关文章