[譯] React組件 是採用Functional 仍是 Class編寫 ?

在React裏面有兩種組件, Class components(類組件) 和 Functional components(函數式組件).二者有明顯的區別,好比

• Class Components 是屬於ES6的類
• Functional Components 是一個函數,它返回一個JSX組件

什麼是Functional Components

先看一段代碼:

function Hello(props){
   return <div>Hello {props.name}</div>
}

這是一個函數式組件(Functional Component), 它和類組件(Class Component)最關鍵的區別就是: 函數式組件沒有state和一系列的鉤子函數,這也是函數式組件常常被用做無狀態組件的緣由

若是你比較熟悉ES6語法,還能夠這樣寫:

const Hello = ({name}) => <div>Hello {{name}}</div>

兩者的做用是徹底一致的

若是用類組件(Class Components)來實現呢

class Hello extends Component{
   render(){
      return <div>Hello {this.props.name}</div>
   }
}

它僅僅包含一個render方法 正如以前所說,若是你的某個組件只有一個render方法,你能夠把它轉換成類組件(Class Component)

因此爲何要用函數式組件(Functional Components)呢

1. 函數式組件易於追溯.
   函數式組件具備很好的可讀性
2. 易於測試,debug
3. 有更好的性能
4. 能更好的複用
5. 能更好的下降代碼之間的耦合

這些狀況下不要用函數式組件(Funcional Components)!!!

• 列表若是你的組件須要在生命週期的鉤子函數裏作一些事情, 或者對state作一些操做, 你應該用類組件.