React函數元件和類元件的差別

差別

函數元件的性能比類元件的性能要高，因為類元件使用的時候要執行個體化，而函數元件直接執行函數取傳回結果即可。為了提高性能，盡量使用函數元件。

差別	函數元件	類元件
是否有 ​ ​this​ ​	沒有	有
是否有生命周期	沒有	有
是否有狀态 ​ ​state​ ​

定義元件的要求

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

函數元件

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

類元件

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

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