react函式式元件（不含hooks）
阿新 • • 發佈：2022-02-09
react中元件有兩種，函式式元件及類式元件，下面將簡單記錄下函式式元件的學習
函式式元件的定義就如同他的名字一樣，直接定義一個函式就行
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>函式式元件</title> 9 <link rel="shortcut icon" href="../favicon.ico"> 10 </head> 11 12 <body> 13 <div class="test"></div> 14 <!-- 引入react --> 15 <script type="text/javascript" src="../js/react.development.js"></script>16 <!-- 引入react-dom --> 17 <script type="text/javascript" src="../js/react-dom.development.js"></script> 18 <!-- 引入babel --> 19 <script type="text/javascript" src="../js/babel.min.js"></script> 20 <!-- 注意此處type為babel --> 21 <script type="text/babel"> 22 //1.建立函式式元件 23 //首字母必須大寫 24 function Demo() { 25 console.log(this)//此處的this是undefined，因為babel編譯後開啟了嚴格模式 26 //函式必須有返回值 27 return <h2>我是用函式定義的元件，使用於簡單元件的定義</h2> 28 } 29 //2.渲染元件到頁面 30 //render引數必須寫元件標籤· 31 ReactDOM.render(<Demo />, document.querySelector('.test')) 32 // ReactDOM.render(Demo(), document.querySelector('.test')) 33 34 /* 35 執行了ReactDOM.render(<Demo />...之後，發生了什麼 36 1.React解析元件標籤，找到了Demo元件 37 2.發現元件是使用函式定義的，隨後呼叫該函式，將返回的虛擬DOM 轉為真實DOM，隨後呈現在頁面上 38 */ 39 </script> 40 41 </body> 42 43 </html>
需要注意的是元件的名字一定要以大寫字母開頭，否則在ReactDOM中呼叫時會被當成標籤名並且報錯（因為它不認識這個標籤）