React函數(shù)組件和類(lèi)組件區(qū)別

定義組件有兩個(gè)要求：

• 組件名稱(chēng)必須以大寫(xiě)字母開(kāi)頭
• 組件的返回值只能有一個(gè)根元素

函數(shù)組件

function Welcome (props) {
? return <h1>Welcome {props.name}</h1>
}
ReactDOM.render(<Welcome name='react' />, document.getElementById('root'));

函數(shù)組件接收一個(gè)單一的 props 對(duì)象并返回了一個(gè)React元素

類(lèi)組件

class Welcome extends React.Component {
? render() {
? ? return (
? ? ? <h1>Welcome { this.props.name }</h1>
? ? );
? }
}
ReactDOM.render(<Welcome name='react' />, document.getElementById('root'));

• 無(wú)論是使用函數(shù)或是類(lèi)來(lái)聲明一個(gè)組件，它決不能修改它自己的 props。
• 所有 React 組件都必須是純函數(shù)，并禁止修改其自身 props 。
• React是單項(xiàng)數(shù)據(jù)流，父組件改變了屬性，那么子組件視圖會(huì)更新。
• 屬性 props 是外界傳遞過(guò)來(lái)的，狀態(tài) state 是組件本身的，狀態(tài)可以在組件中任意修改
• 組件的屬性和狀態(tài)改變都會(huì)更新視圖。

區(qū)別

函數(shù)組件和類(lèi)組件當(dāng)然是有區(qū)別的，而且函數(shù)組件的性能比類(lèi)組件的性能要高，因?yàn)轭?lèi)組件使用的時(shí)候要實(shí)例化，而函數(shù)組件直接執(zhí)行函數(shù)取返回結(jié)果即可。為了提高性能，盡量使用函數(shù)組件。?

React函數(shù)式組件和類(lèi)組件的優(yōu)缺點(diǎn)

1.類(lèi)組件的性能消耗比較大

因?yàn)轭?lèi)組件需要?jiǎng)?chuàng)建類(lèi)組件的實(shí)例，而且不能銷(xiāo)毀。

2.函數(shù)式組件性能消耗小

因?yàn)楹瘮?shù)式組件不需要?jiǎng)?chuàng)建實(shí)例，渲染的時(shí)候就執(zhí)行一下，得到返回的react元素后就直接把中間量全部都銷(xiāo)毀。

函數(shù)式組件是不能有狀態(tài)的，但是現(xiàn)在有了react hooks，也可能有狀態(tài)了。