reactjs创建虚拟DOM的两种方式：使用jsx和js创建虚拟DOM
生活随笔
收集整理的這篇文章主要介紹了
reactjs创建虚拟DOM的两种方式：使用jsx和js创建虚拟DOM
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1_使用jsx創建虛擬DOM
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>1_使用jsx創建虛擬DOM</title> </head> <body><!-- 準備好一個“容器” --><div id="test"></div><!-- 引入react核心庫 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于將jsx轉為js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel" > /* 此處一定要寫babel *///1.創建虛擬DOMconst VDOM = ( /* 此處一定不要寫引號，因為不是字符串 */<h1 id="title"><span>Hello,React</span></h1>)//2.渲染虛擬DOM到頁面ReactDOM.render(VDOM,document.getElementById('test'))</script> </body> </html>2_使用js創建虛擬DOM
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>2_使用js創建虛擬DOM</title> </head> <body><!-- 準備好一個“容器” --><div id="test"></div><!-- 引入react核心庫 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" > //1.創建虛擬DOMconst VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))//2.渲染虛擬DOM到頁面ReactDOM.render(VDOM,document.getElementById('test'))</script> </body> </html>總結
以上是生活随笔為你收集整理的reactjs创建虚拟DOM的两种方式：使用jsx和js创建虚拟DOM的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： reactjs虚拟DOM与真实DOM
- 下一篇： reactjs入门示例