脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React创建虚拟DOM

React创建虚拟DOM的两种方式小结

 更新时间：2025年01月15日 08:31:33   作者：飞翔的大野猪  
本文主要介绍了两种创建React虚拟DOM的方式,包括JS方式和jsx方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

一、JS方式创建虚拟DOM

<body>
    <div id="test">

    </div>
</body>
<!-- 引入React核心库 -->
<script src="./js/react.development.js"></script>

<!-- 引入react-dom 用于支持react操作DOM -->
<script src="./js/react-dom.development.js"></script>

<script type="text/javascript">
    // 1.创建虚拟DOM 参数1为标签名 参数2为属性名 参数3为属性值
    const VDOM = React.createElement('h1',{id:'title'},'Hello,React')

    // 2.渲染到页面中的指定DOM
    // ReactDOM.render(虚拟DOM,真实DOM)
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>

二、jsx创建虚拟DOM

<body>
    <div id="test">

    </div>
</body>
<!-- 引入React核心库 -->
<script src="./js/react.development.js"></script>

<!-- 引入react-dom 用于支持react操作DOM -->
<script src="./js/react-dom.development.js"></script>

<!-- 引入babel:
    1.ES6 ==> ES5
    2.jsx ==> js
-->
<script src="./js/babel.min.js"></script>

<script type="text/babel">
    // 1.创建虚拟DOM
    const VDOM = <h1>Hello,React</h1>

    // 2.渲染到页面中的指定DOM
    // ReactDOM.render(虚拟DOM,真实DOM)
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>

jsx的语法规则：

1. 定义虚拟DOM,不要写引号

2.标签中混入JS表达式时,要用{}

3.样式的类名指定不要用class,要用className

4.内联样式,要用style={{key:value}}的形式去写

5.只能有一个根元素

6.所有标签都必须闭合

7.标签的首字母:

①若小写字母开头,则将该标签转换为html同名的元素,渲染到页面,若html没有同名的元素,则报错

②若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错

到此这篇关于React创建虚拟DOM的两种方式小结的文章就介绍到这了,更多相关React创建虚拟DOM内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 每天一个hooks学习之useUpdateEffect

    每天一个hooks学习之useUpdateEffect

    这篇文章主要为大家介绍了每天一个hooks学习之useUpdateEffect使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-05-05
  • React中使用外部样式的3种方式(小结)

    React中使用外部样式的3种方式(小结)

    这篇文章主要介绍了React中使用外部样式的3种方式(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • React学习笔记之事件处理（二）

    React学习笔记之事件处理（二）

    这篇文章主要跟大家介绍了关于React中事件处理的相关资料，文中通过示例代码介绍的非常详细，对大家学习React具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
    2017-07-07
  • React 路由懒加载的几种实现方案

    React 路由懒加载的几种实现方案

    这篇文章主要介绍了React 路由懒加载的几种实现方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • React中的stopPropagation和preventDefault实践记录

    React中的stopPropagation和preventDefault实践记录

    本文详细介绍了事件冒泡、捕获与React合成事件体系下的表现区别,包括事件传播阶段、处理方式、事件池机制等核心概念,对React stopPropagation和preventDefault相关知识感兴趣的朋友跟随小编一起看看吧
    2025-11-11
  • 解决React报错Property 'X' does not exist on type 'HTMLElement'

    解决React报错Property 'X' does not 

    这篇文章主要为大家介绍了解决React报错Property 'X' does not exist on type 'HTMLElement'，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • React Router V4使用指南(精讲)

    React Router V4使用指南(精讲)

    这篇文章主要介绍了React Router V4使用指南(精讲)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 关于React中setState同步或异步问题的理解

    关于React中setState同步或异步问题的理解

    相信很多小伙伴们都一直在疑惑，setState 到底是同步还是异步。本文就详细的介绍一下React中setState同步或异步问题，感兴趣的可以了解一下
    2021-11-11
  • Redux DevTools不能显示数据问题

    Redux DevTools不能显示数据问题

    这篇文章主要介绍了Redux DevTools不能显示数据问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • React Native中Mobx的使用方法详解

    React Native中Mobx的使用方法详解

    这篇文章主要给大家介绍了关于React Native中Mobx的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12

最新评论