使用react就是在使用react的組件
組件：可復(fù)用性填具，獨立性卡者，可組合性
函數(shù)組件
注意：
1.函數(shù)名必須大寫字母開頭
2.函數(shù)組件必須有返回值,表示組件結(jié)構(gòu)
function Fn(){
return(
<div>函數(shù)組件</div>
)
}
//es6寫法:
const Fn = ()=><div>函數(shù)組件</div>
ReactDOM.render(<Fn></Fn>,document.getElementById('root'))//函數(shù)名作為標(biāo)簽 渲染
例
類組件
使用es6語法的class創(chuàng)建的組件
注意:
1.類組件應(yīng)該繼承React.Compontent父類
2.類組件必須提供render（）方法
3.render方法里必須用return（）返回值
class Fn extends React.Component{
render(){
return(
<div>類組件</div>
)
}
}
一般我們一個組件寫一個js文件,然后需要用那個組件的時候?qū)肽莻€組件
image.png
例
| 區(qū)別 | 函數(shù)組件 | 類組件 |
|---|---|---|
| 是否有 this | 沒有 | 有 |
| 是否有生命周期 | 沒有 | 有 |
| 是否有狀態(tài) state | 沒有 | 有 |
類組件的性能消耗比較大因為需創(chuàng)建實例
