react虚拟DOM的两种创建方式

原创已于 2022-06-22 10:59:35 修改 · 280 阅读

1 ·

CC 4.0 BY-SA版权

张鱼小丸子

文章标签：

#react.js #前端 #javascript

于 2022-06-22 10:58:19 首次发布

react 专栏收录该内容

49 篇文章

订阅专栏

本文介绍了React中虚拟DOM的概念，包括其特点（高效渲染和轻量级），并详细讲解了两种创建虚拟DOM的方法——JSX语法和官方API。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

hello react

虚拟dom的特点：

虚拟dom的两种创建方式：

hello react

我们想要使用react，首先要引入官方核心库，以及react-dom渲染库

<script type="text/javascript" src="../day02/js/react.development.js" ></script>

<script type="text/javascript" src="../day02/js/react-dom.development.js" ></script>

虚拟dom的特点：

渲染速度快，进行虚拟dom树，变化前后对比，将不同的数据对象进行真实的dom渲染，虚拟dom就是一个对象，比真实dom更加轻量级，效率更高

虚拟dom的两种创建方式：

第一种，jsx语法创建虚拟dom（推荐）

<body>
    <div id="root">
    
    </div>
</body>
<script type="text/babel">
    let VDOM=<h4>hello,react</h4>
    ReactDOM.render(VDOM,document.getElementById('root'))
</script>

第二种：使用官方api创建虚拟dom

<body>
    <div id="root">
    
    </div>
</body>
<script type="text/babel">
    let VDOM=<h4>hello,react</h4>
         ReactDOM.render(React.createElement("h4{title:'hello,react'},'hello,react'),document.getElementById('root'))
</script>