React创建虚拟DOM的两种方式小结-牛翰网

一、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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源链接：https://www.jb51.net/javascript/334210zh8.htm