定義組件的幾種方式
- 工廠函數(shù)(無(wú)狀態(tài))，一般對(duì)于簡(jiǎn)單的組件菱阵，推薦使用
// 工廠函數(shù)（無(wú)狀態(tài)）創(chuàng)建組件，一般簡(jiǎn)單的組件推薦使用
function FunComponent() {
return <div>
<ul>
<li>工廠函數(shù)創(chuàng)建的組件，return一個(gè)虛擬DOM對(duì)象</li>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
}
ReactDOM.render(
<FunComponent />,
document.getElementById("example")
);
- ES6 class定義組件奖年；復(fù)雜組件推薦使用
class ClassComponent extends React.Component{
render(){
return <div>
<p>es6 class定義組件</p>
</div>
}
}
ReactDOM.render(
<ClassComponent />,
document.getElementById("example1")
);
組件的調(diào)用方法
- 類似于標(biāo)簽的使用
<組件名稱 />
注意項(xiàng)
- 組件的名稱首字母必須大寫(xiě)
- 組件中的虛擬DOM對(duì)象惯吕，只能有一個(gè)跟標(biāo)簽惕它，也就是，如果要渲染一個(gè)DOM集合废登，需要用一個(gè)容器包裹起來(lái)淹魄，否則則會(huì)被覆蓋
