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

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

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

一、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為標簽名 參數(shù)2為屬性名 參數(shù)3為屬性值
    const VDOM = React.createElement('h1',{id:'title'},'Hello,React')

    // 2.渲染到頁面中的指定DOM
    // ReactDOM.render(虛擬DOM,真實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,真實DOM)
    ReactDOM.render(VDOM, document.getElementById('test'))
</script>

jsx的語法規(guī)則：

1. 定義虛擬DOM,不要寫引號

2.標簽中混入JS表達式時,要用{}

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

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

5.只能有一個根元素

6.所有標簽都必須閉合

7.標簽的首字母:

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

②若大寫字母開頭,react就去渲染對應的組件,若組件沒有定義,則報錯

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

您可能感興趣的文章:

React基礎-JSX的本質(zhì)-虛擬DOM的創(chuàng)建過程實例分析

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