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

编程问答

reactjs定义组件：类式组件

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

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

執行了ReactDOM.render(…之后，發生了什么？
1.React解析組件標簽，找到了MyComponent組件。
2.發現組件是使用類定義的，隨后new出來該類的實例，并通過該實例調用到原型上的render方法。
3.將render返回的虛擬DOM轉為真實DOM，隨后呈現在頁面中。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>2_類式組件</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.創建類式組件class MyComponent extends React.Component {render(){//render是放在哪里的？—— MyComponent的原型對象上，供實例使用。//render中的this是誰？—— MyComponent的實例對象 <=> MyComponent組件實例對象。console.log('render中的this:',this);return <h2>我是用類定義的組件(適用于【復雜組件】的定義)</h2>}}//2.渲染組件到頁面ReactDOM.render(<MyComponent/>,document.getElementById('test'))/* 執行了ReactDOM.render(<MyComponent/>.......之后，發生了什么？1.React解析組件標簽，找到了MyComponent組件。2.發現組件是使用類定義的，隨后new出來該類的實例，并通過該實例調用到原型上的render方法。3.將render返回的虛擬DOM轉為真實DOM，隨后呈現在頁面中。*/</script> </body> </html>

總結

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

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

上一篇： reactjs组件实例的三大属性之pro
下一篇： reactjs定义组件：函数式组件