React創(chuàng)建虛擬DOM的兩種方式小結(jié)
一、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)文章
本篇文章主要介紹了淺談React 服務(wù)器端渲染的使用，React是最受歡迎的客戶端 JavaScript 框架，在本教程中，我們將逐步向您介紹服務(wù)器端的渲染示例2018-05-05
rematch是對(duì)redux的二次封裝，簡化了redux是使用，極大的提高了開發(fā)體驗(yàn)，這篇文章主要介紹了React狀態(tài)管理器Rematch的使用,需要的朋友可以參考下2022-09-09
關(guān)于react hook useState連續(xù)更新對(duì)象的問題
這篇文章主要介紹了關(guān)于react hook useState連續(xù)更新對(duì)象的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
使用React?MUI庫實(shí)現(xiàn)用戶列表分頁功能
MUI是一款基于React的UI組件庫，可以方便地構(gòu)建美觀的用戶界面，使用MUI的DataTable組件和分頁器組件可以輕松實(shí)現(xiàn)用戶列表分頁功能，這篇文章使用MUI庫實(shí)現(xiàn)了用戶列表分頁功能，感興趣的同學(xué)可以參考下文2023-05-05
react實(shí)現(xiàn)點(diǎn)擊選中的li高亮的示例代碼
本篇文章主要介紹了react實(shí)現(xiàn)選中的li高亮的示例代碼，頁面上有很多個(gè)li，要實(shí)現(xiàn)點(diǎn)擊到哪個(gè)就哪個(gè)高亮。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
深入React?18源碼useMemo?useCallback?memo用法及區(qū)別分析
這篇文章主要為大家介紹了React?18源碼深入分析useMemo?useCallback?memo用法及區(qū)別，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要介紹了使用Redux處理異步問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
React源碼state計(jì)算流程和優(yōu)先級(jí)實(shí)例解析
這篇文章主要為大家介紹了React源碼state計(jì)算流程和優(yōu)先級(jí)實(shí)例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
Ant?Design?組件庫按鈕實(shí)現(xiàn)示例詳解
這篇文章主要介紹了Ant?Design?組件庫按鈕實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪</P><P><BR>2022-08-08
使用webpack5從0到1搭建一個(gè)react項(xiàng)目的實(shí)現(xiàn)步驟
這篇文章主要介紹了使用webpack5從0到1搭建一個(gè)react項(xiàng)目的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12