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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
本篇文章主要介绍了浅谈React 服务器端渲染的使用，React是最受欢迎的客户端 JavaScript 框架，在本教程中，我们将逐步向您介绍服务器端的渲染示例2018-05-05
rematch是对redux的二次封装，简化了redux是使用，极大的提高了开发体验，这篇文章主要介绍了React状态管理器Rematch的使用,需要的朋友可以参考下2022-09-09
关于react hook useState连续更新对象的问题
这篇文章主要介绍了关于react hook useState连续更新对象的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
MUI是一款基于React的UI组件库，可以方便地构建美观的用户界面，使用MUI的DataTable组件和分页器组件可以轻松实现用户列表分页功能，这篇文章使用MUI库实现了用户列表分页功能，感兴趣的同学可以参考下文2023-05-05
本篇文章主要介绍了react实现选中的li高亮的示例代码，页面上有很多个li，要实现点击到哪个就哪个高亮。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
深入React 18源码useMemo useCallback memo用法及区别分析
这篇文章主要为大家介绍了React 18源码深入分析useMemo useCallback memo用法及区别，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要介绍了使用Redux处理异步问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家介绍了React源码state计算流程和优先级实例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了Ant Design 组件库按钮实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪</P><P><BR>2022-08-08
使用webpack5从0到1搭建一个react项目的实现步骤
这篇文章主要介绍了使用webpack5从0到1搭建一个react项目的实现步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
最新评论