快捷導(dǎo)航

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à)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、JS方式創(chuàng)建虛擬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.創(chuàng)建虛擬DOM 參數(shù)1為標(biāo)簽名 參數(shù)2為屬性名 參數(shù)3為屬性值
    const VDOM = React.createElement('h1',{id:'title'},'Hello,React')

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

二、jsx創(chuàng)建虛擬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.創(chuàng)建虛擬DOM
    const VDOM = <h1>Hello,React</h1>

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

jsx的語法規(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同名的元素,渲染到頁面,若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)文章

深入對(duì)比三種主流的React狀態(tài)管理方案(Redux?Toolkit?vs?Zustand?vs?Contex
在現(xiàn)代React開發(fā)中,狀態(tài)管理是構(gòu)建復(fù)雜應(yīng)用程序的核心挑戰(zhàn)之一,本文將深入對(duì)比三種主流的React狀態(tài)管理方案,Redux?Toolkit、Zustand和Context?API,希望對(duì)大家有所幫助
2025-09-09
詳解React路由傳參方法匯總記錄
這篇文章主要介紹了詳解React路由傳參方法匯總記錄，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-11-11
React?SSR架構(gòu)Stream?Rendering與Suspense?for?Data?Fetching
這篇文章主要為大家介紹了React?SSR架構(gòu)Stream?Rendering與Suspense?for?Data?Fetching解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
React中父子組件通信詳解
這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實(shí)現(xiàn)父組件向子組件通信，文章通過圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-08-08
react調(diào)試和測(cè)試代碼的小技巧
在開發(fā)React應(yīng)用時(shí),嚴(yán)格模式StrictMode可以幫助開發(fā)者捕捉到組件中的錯(cuò)誤和潛在問題,安裝React Developer Tools瀏覽器擴(kuò)展檢查組件的props和狀態(tài),直接修改以及分析性能,@testing-library/react和Cypress或Playwright等工具可以有效地測(cè)試React組件和執(zhí)行端到端測(cè)試
2024-10-10
react中(含hooks)同步獲取state值的方式
這篇文章主要介紹了react(含hooks)中同步獲取state值的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
react中的axios模塊你了解嗎
這篇文章主要為大家詳細(xì)介紹了react中的axios模塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
react數(shù)據(jù)管理中的setState與Props詳解
setState?是?React?中用于更新組件狀態(tài)（state）的方法,本文給大家介紹react數(shù)據(jù)管理中的setState與Props知識(shí),感興趣的朋友跟隨小編一起看看吧
2023-10-10
解決React報(bào)錯(cuò)Cannot?find?namespace?context
這篇文章主要為大家介紹了React報(bào)錯(cuò)Cannot?find?namespace?context分析解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
React實(shí)現(xiàn)類似于Vue中的插槽的項(xiàng)目實(shí)踐
本文主要介紹了React實(shí)現(xiàn)類似于Vue中的插槽的項(xiàng)目實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-05-05