React函數組件和類組件區別

定義組件有兩個要求：

• 組件名稱必須以大寫字母開頭
• 組件的返回值只能有一個根元素

函數組件

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

函數組件接收一個單一的 props 對象并返回了一個React元素

類組件

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

• 無論是使用函數或是類來聲明一個組件，它決不能修改它自己的 props。
• 所有 React 組件都必須是純函數，并禁止修改其自身 props 。
• React是單項數據流，父組件改變了屬性，那么子組件視圖會更新。
• 屬性 props 是外界傳遞過來的，狀態 state 是組件本身的，狀態可以在組件中任意修改
• 組件的屬性和狀態改變都會更新視圖。

區別

函數組件和類組件當然是有區別的，而且函數組件的性能比類組件的性能要高，因為類組件使用的時候要實例化，而函數組件直接執行函數取返回結果即可。為了提高性能，盡量使用函數組件。?

React函數式組件和類組件的優缺點

1.類組件的性能消耗比較大

因為類組件需要創建類組件的實例，而且不能銷毀。

2.函數式組件性能消耗小

因為函數式組件不需要創建實例，渲染的時候就執行一下，得到返回的react元素后就直接把中間量全部都銷毀。

函數式組件是不能有狀態的，但是現在有了react hooks，也可能有狀態了。