React中函數組件和類組件的區別

定義組件有兩個要求：

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

 

   函數組件：

 

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 是組件本身的，狀態可以在組件中任意修改

       組件的屬性和狀態改變都會更新視圖。

      區別：

　　函數組件和類組件當然是有區別的，而且函數組件的性能比類組件的性能要高，

        因為類組件使用的時候要實例化，而函數組件直接執行函數取返回結果即可。

　　為了提高性能，盡量使用函數組件。

　　函數組件沒有this,沒有生命周期，沒有狀態state,

　　類組件有this,有生命周期，有狀態state。