1. 程式人生 > >React系列--元件Component

React系列--元件Component

1. 元件其實可以理解為 虛擬 dom物件的集合。也是一個虛擬dom。

1.1元件定義有兩種方式

  //  1) 工廠函式,無狀態,(定義一些比較簡潔的元件,推薦使用)     function MyComponent1(){       return <h2>工廠函式</h2>;     }   //   2) ES6 class方式定義元件      //推薦     class MyComponent2 extends React.Component{       render(){         return <h3>ES6 class定義元件</h3>;       }     } 1.2// 渲染元件:   ReactDOM.render(<MyComponent1/>,document.getElementById("example1"));   ReactDOM.render(<MyComponent2/>,document.getElementById("example2")); //注意元件的傳入方式是</>,而之前的直接是一個虛擬dom物件 example=<h1>haha</h1>  2.在元件的寫法上需要注意以下幾點:   2.1 元件類首字母必須大寫   2.2 虛擬dom元素只有一個根元素,即需要一個總的標籤包裹住所有的虛擬dom, <div>10個h1標籤</div>   2.3 虛擬dom必須有結束標籤,所以元件是 <MyCom/>   或者是 <ul>haha</ul> 3. ReactDOM.render()渲染元件標籤的基本流程   3.1 React內部會建立元件例項物件   3.2 得到包含的虛擬DOM,並解析為真實DOM   3.3 插入到指定部分