React 面向元件化程式設計
阿新 • • 發佈:2019-01-08
React 面向元件化程式設計
面向物件----> 面向模組 ----> 面向元件
套路:
注意:
元件名必須大寫開頭;
只能有一個根標籤;
<input />虛擬DOM 元素必須有結束標籤
方式1. 工廠函式元件 (簡單元件)
-
function MyComponent(){ // 只能 大寫開頭,區別於普通函式 return <h2>工廠函式元件(簡單元件)</h2> }
// 渲染函式元件標籤
// 內部直接呼叫 工廠元件函式 得到虛擬元件函式 ReactDOM.render(<MyComponent/>, document.getElementById("outer"))
方式2: ES6 類元件 (複雜元件)
-
class MyComponent2 extends React.Component { // 1. 必須繼承 // 2. 必須大寫開頭 // 3. 必須重寫 render 方法, 指定 return 返回值 render (){ return <h2>ES6類元件(複雜元件)</h2> } }
// 渲染類元件標籤
// 內部會自動建立類的例項,並呼叫其 render() 方法得到需要渲染的虛擬 DOM React.render(<MyComponent/>, document.getElementById("outer"));
5
500
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5
5