React創(chuàng)建虛擬DOM的兩種方式小結(jié)

更新時(shí)間：2025年01月15日 08:31:33 作者：飛翔的大野豬

本文主要介紹了兩種創(chuàng)建React虛擬DOM的方式,包括JS方式和jsx方式,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、JS方式創(chuàng)建虛擬DOM

<body>
    <div id="test">

    </div>
</body>
<!-- 引入React核心庫(kù) -->
<script src="./js/react.development.js"></script>

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

<script type="text/javascript">
    // 1.創(chuàng)建虛擬DOM 參數(shù)1為標(biāo)簽名 參數(shù)2為屬性名 參數(shù)3為屬性值
    const VDOM = React.createElement('h1',{id:'title'},'Hello,React')

    // 2.渲染到頁(yè)面中的指定DOM
    // ReactDOM.render(虛擬DOM,真實(shí)DOM)
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>

二、jsx創(chuàng)建虛擬DOM

<body>
    <div id="test">

    </div>
</body>
<!-- 引入React核心庫(kù) -->
<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.創(chuàng)建虛擬DOM
    const VDOM = <h1>Hello,React</h1>

    // 2.渲染到頁(yè)面中的指定DOM
    // ReactDOM.render(虛擬DOM,真實(shí)DOM)
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>

jsx的語(yǔ)法規(guī)則：

1. 定義虛擬DOM,不要寫引號(hào)

2.標(biāo)簽中混入JS表達(dá)式時(shí),要用{}

3.樣式的類名指定不要用class,要用className

4.內(nèi)聯(lián)樣式,要用style={{key:value}}的形式去寫

5.只能有一個(gè)根元素

6.所有標(biāo)簽都必須閉合

7.標(biāo)簽的首字母:

①若小寫字母開頭,則將該標(biāo)簽轉(zhuǎn)換為html同名的元素,渲染到頁(yè)面,若html沒有同名的元素,則報(bào)錯(cuò)

②若大寫字母開頭,react就去渲染對(duì)應(yīng)的組件,若組件沒有定義,則報(bào)錯(cuò)

到此這篇關(guān)于React創(chuàng)建虛擬DOM的兩種方式小結(jié)的文章就介紹到這了,更多相關(guān)React創(chuàng)建虛擬DOM內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

每天一個(gè)hooks學(xué)習(xí)之useUpdateEffect
這篇文章主要為大家介紹了每天一個(gè)hooks學(xué)習(xí)之useUpdateEffect使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
React中使用外部樣式的3種方式(小結(jié))
這篇文章主要介紹了React中使用外部樣式的3種方式(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
React學(xué)習(xí)筆記之事件處理（二）
這篇文章主要跟大家介紹了關(guān)于React中事件處理的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)React具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。
2017-07-07
React 路由懶加載的幾種實(shí)現(xiàn)方案
這篇文章主要介紹了React 路由懶加載的幾種實(shí)現(xiàn)方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2018-10-10
React中的stopPropagation和preventDefault實(shí)踐記錄
本文詳細(xì)介紹了事件冒泡、捕獲與React合成事件體系下的表現(xiàn)區(qū)別,包括事件傳播階段、處理方式、事件池機(jī)制等核心概念,對(duì)React?stopPropagation和preventDefault相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧
2025-11-11
解決React報(bào)錯(cuò)Property 'X' does not
這篇文章主要為大家介紹了解決React報(bào)錯(cuò)Property 'X' does not exist on type 'HTMLElement'，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
React Router V4使用指南(精講)
這篇文章主要介紹了React Router V4使用指南(精講)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2018-09-09
關(guān)于React中setState同步或異步問題的理解
相信很多小伙伴們都一直在疑惑，setState 到底是同步還是異步。本文就詳細(xì)的介紹一下React中setState同步或異步問題，感興趣的可以了解一下
2021-11-11
Redux DevTools不能顯示數(shù)據(jù)問題
這篇文章主要介紹了Redux DevTools不能顯示數(shù)據(jù)問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-01-01
React Native中Mobx的使用方法詳解
這篇文章主要給大家介紹了關(guān)于React Native中Mobx的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2018-12-12