//1. 創建函數式組件(代碼和資源的集合)
function MyComponent(){ //注意: 首字母必須大寫
console.log(this); //此處的this是undefined, 因為babel編譯后開啟了嚴格模式
return <h1>函數式組件編程, 適合簡單的組件編程</h1>
}
//2. 渲染組件到頁面
ReactDOM.render(<MyComponent/>,document.getElementById("test"));
/*
執行了ReactDOM.render(<MyComponent/>,document.getElementById("test"));...之后,發生了什么
1. React解析組件標簽, 找到了MyComponent組件
2. 發現組件是使用函數定義的, 隨后調用該函數,將返回的虛擬DOM轉為真實DOM,隨后呈現在頁面中
*/
//2. 創建類式組件
class MyComponent extends React.Component{
//render是放在哪里的?-- 類MyComponent的原型對象上,供實例使用
render(h) {
//render中的this是誰?--MyComponent實例對象//MyComponent組件實例對象
console.log("render中的this",this);//MyComponent{}
return <h2>我是用類定義的組件(適用于復雜組件的定義)</h2>
}
}
ReactDOM.render(<MyComponent/>,document.getElementById("test"))
/*
執行了ReactDOM.render(<MyComponent/>,document.getElementById("test"));...之后,發生了什么
1. React解析組件標簽, 找到了MyComponent組件
2. 發現組件是使用類定義的, 隨后new出來該類的實例,并通過該實例調用到原型上的render()方法
3. 將render返回的虛擬dom轉換為真實dom,隨后呈現在頁面中
*/
//React 元素也可以是用戶自定義的組件:
const element = <Welcome name="Sara" />;
const element = <Welcome name="Sara" />;