React創(chuàng)建虛擬DOM的兩種方式小結(jié)
一、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,不要寫(xiě)引號(hào)
2.標(biāo)簽中混入JS表達(dá)式時(shí),要用{}
3.樣式的類(lèi)名指定不要用class,要用className
4.內(nèi)聯(lián)樣式,要用style={{key:value}}的形式去寫(xiě)
5.只能有一個(gè)根元素
6.所有標(biāo)簽都必須閉合
7.標(biāo)簽的首字母:
①若小寫(xiě)字母開(kāi)頭,則將該標(biāo)簽轉(zhuǎn)換為html同名的元素,渲染到頁(yè)面,若html沒(méi)有同名的元素,則報(bào)錯(cuò)
②若大寫(xiě)字母開(kāi)頭,react就去渲染對(duì)應(yīng)的組件,若組件沒(méi)有定義,則報(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開(kāi)發(fā)中,狀態(tài)管理是構(gòu)建復(fù)雜應(yīng)用程序的核心挑戰(zhàn)之一,本文將深入對(duì)比三種主流的React狀態(tài)管理方案,Redux?Toolkit、Zustand和Context?API,希望對(duì)大家有所幫助2025-09-09
這篇文章主要介紹了詳解React路由傳參方法匯總記錄，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(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中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實(shí)現(xiàn)父組件向子組件通信，文章通過(guò)圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
在開(kāi)發(fā)React應(yīng)用時(shí),嚴(yán)格模式StrictMode可以幫助開(kāi)發(fā)者捕捉到組件中的錯(cuò)誤和潛在問(wèn)題,安裝React Developer Tools瀏覽器擴(kuò)展檢查組件的props和狀態(tài),直接修改以及分析性能,@testing-library/react和Cypress或Playwright等工具可以有效地測(cè)試React組件和執(zhí)行端到端測(cè)試2024-10-10
這篇文章主要介紹了react(含hooks)中同步獲取state值的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細(xì)介紹了react中的axios模塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助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)類(lèi)似于Vue中的插槽的項(xiàng)目實(shí)踐
本文主要介紹了React實(shí)現(xiàn)類(lèi)似于Vue中的插槽的項(xiàng)目實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05