React创建虚拟DOM的两种方式小结
作者：飞翔的大野猪
本文主要介绍了两种创建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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！