當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

reactjs定义组件：函数式组件

發布時間：2025/1/21 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 reactjs定义组件：函数式组件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

執行了ReactDOM.render(…之后，發生了什么？
1.React解析組件標簽，找到了MyComponent組件。
2.發現組件是使用函數定義的，隨后調用該函數，將返回的虛擬DOM轉為真實DOM，隨后呈現在頁面中。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>1_函數式組件</title> </head> <body><div id="test"></div><script type="text/javascript" src="../js/react.development.js"></script><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//1.創建函數式組件function MyComponent(){console.log(this); //此處的this是undefined，因為babel編譯后開啟了嚴格模式return <h2>我是用函數定義的組件(適用于【簡單組件】的定義)</h2>}//2.渲染組件到頁面ReactDOM.render(<MyComponent/>,document.getElementById('test'))/* 執行了ReactDOM.render(<MyComponent/>.......之后，發生了什么？1.React解析組件標簽，找到了MyComponent組件。2.發現組件是使用函數定義的，隨后調用該函數，將返回的虛擬DOM轉為真實DOM，隨后呈現在頁面中。*/</script> </body> </html>

總結

以上是生活随笔為你收集整理的reactjs定义组件：函数式组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： reactjs定义组件：类式组件
下一篇： reactjs基础：jsx小练习