reactjs创建虚拟DOM的两种方式：使用jsx和js创建虚拟DOM

1_使用jsx创建虚拟DOM

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>1_使用jsx创建虚拟DOM</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel" > /* 此处一定要写babel *///1.创建虚拟DOMconst VDOM = (  /* 此处一定不要写引号，因为不是字符串 */<h1 id="title"><span>Hello,React</span></h1>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))</script>
</body>
</html>

2_使用js创建虚拟DOM

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>2_使用js创建虚拟DOM</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" > //1.创建虚拟DOMconst VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))</script>
</body>
</html>

reactjs创建虚拟DOM的两种方式：使用jsx和js创建虚拟DOM相关推荐

有效创建Oracle dblink的两种方式
有效创建Oracle dblink的两种方式两台不同的数据库服务器,从一台数据库服务器的一个用户读取另一台数据库服务器下的某个用户的数据,这个时候可以使用dblink. 其实dblink和数据库中的 ...
Oracle创建Database Link的两种方式
Oracle数据库如何创建Database Link呢?本文我们主要就介绍一下这部分内容,Oracle数据库创建Database Link有两种方式,一种是通过菜单,一种是通过SQL. 创建一个dbl ...
python创建多线程_Python 多线程，threading模块，创建子线程的两种方式示例
本文实例讲述了Python 多线程,threading模块,创建子线程的两种方式.分享给大家供大家参考,具体如下: GIL(全局解释器锁)是C语言版本的Python解释器中专有的,GIL的存在让多线程 ...
Unity编辑器开发——通过模板创建Lua脚本的两种方式（二）
个人学习笔记,如有错误.疑问.建议,欢迎留言. 本文有关代码转载自:Unity3D 扩展编辑器实现创建Lua脚本 - 知乎 (zhihu.com) 声明:本文转载已取得原文章作者同意,有兴趣的可以关注 ...
创建安卓模拟器的两种方式及常用Android命令介绍
创建安卓模拟器有以下两种方式: 1>通过图形界面创建,在Eclipse中单击Windows->Android Virtual Device Manager启动图形界面窗口 2>如果用 ...
利用反射机制创建新类的两种方式及比较
[0]README 0.1) 本文描述+源代码均转自 http://blog.csdn.net/fenglibing/article/details/4531033 , 旨在深入理解如何利用反射机 ...
保姆级swap分区详解！手把手带你创建swap分区（两种方式，建议收藏）涉及fdisk、gdisk、df、parted、partprobe、mkswap、swapon、free、dd、od等命令
Swap分区的详解 && 创建什么是swap分区? 方法一:使用物理分区创建Swap分区 1. 利用fdisk / gdisk在磁盘上划出一个分区 1.1 lsblk -- 查看本机 ...
创建docker镜像的两种方式
文章目录前言第一种方式: 通过docker commit 创建镜像通过Dockerfile构建前言通过docker run -it centos:7 运行的容器之中是没有vim的这里我们创 ...
spring boot controller 初始化_使用 Spring 快速创建 web 应用的两种方式
介绍本篇文章主要介绍,如何使用 Spring 开发一个 Web 应用. 我们将研究用 Spring Boot 开发一个 web 应用,并研究用非 Spring Boot 的方法. 我们将主要使用 J ...

reactjs创建虚拟DOM的两种方式：使用jsx和js创建虚拟DOM

1_使用jsx创建虚拟DOM

2_使用js创建虚拟DOM

reactjs创建虚拟DOM的两种方式：使用jsx和js创建虚拟DOM相关推荐

最新文章

热门文章