React中有兩種元件：函式元件（Functional Components) 和類元件（Class Components）。據我觀察，大部分同學都習慣於用類元件，而很少會主動寫函式元件，包括我自己也是這樣。但實際上，在使用場景和功能實現上，這兩類元件是有很大區別的。

來看一個函式元件的例子：

function Welcome = (props) => {
  const sayHi = () => {
    alert(`Hi ${props.name}`);
  }

  return (
    <div>
      <h1>Hello, {props.name}</h1>
      <button onClick ={sayHi}>Say Hi</button>
    </div>
  )
}
 

把上面的函式元件改寫成類元件：

import React from 'react'

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.sayHi = this.sayHi.bind(this);
  }

  sayHi() {
    alert(`Hi ${this.props.name}`);
  }

  render() {
    return (
      <div>
        <h1>Hello, {this
 
.props.name}</h1>
        <button onClick ={this.sayHi}>Say Hi</button>
      </div>
    )
  } 
}

下面讓我們來分析一下兩種實現的區別：

1. 第一眼直觀的區別是，函式元件的程式碼量比類元件要少一些，所以函式元件比類元件更加簡潔。千萬不要小看這一點，對於我們追求極致的程式設計師來說，這依然是不可忽視的。

2. 函式元件看似只是一個返回值是DOM結構的函式，其實它的背後是無狀態元件（Stateless Components）的思想。函式元件中，你無法使用State，也無法使用元件的生命週期方法，

   這就決定了函式元件都是展示性元件（Presentational Components），接收Props，渲染DOM，而不關注其他邏輯。

3. 函式元件中沒有this。所以你再也不需要考慮this帶來的煩惱。而在類元件中，你依然要記得繫結this這個瑣碎的事情。如示例中的sayHi。

4. 函式元件更容易理解。當你看到一個函式元件時，你就知道它的功能只是接收屬性，渲染頁面，它不執行與UI無關的邏輯處理，它只是一個純函式。而不用在意它返回的DOM結構有多複雜。

5. 效能。目前React還是會把函式元件在內部轉換成類元件，所以使用函式元件和使用類元件在效能上並無大的差異。但是，React官方已承諾，未來將會優化函式元件的效能，因為函式元件不需要考慮元件狀態和元件生命週期方法中的各種比較校驗，所以有很大的效能提升空間。

6. 函式元件迫使你思考最佳實踐。這是最重要的一點。元件的主要職責是UI渲染，理想情況下，所有的元件都是展示性元件，每個頁面都是由這些展示性元件組合而成。如果一個元件是函式元件，那麼它當然滿足這個要求。所以牢記函式元件的概念，可以讓你在寫元件時，先思考這個元件應不應該是展示性元件。更多的展示性元件意味著更多的元件有更簡潔的結構，更多的元件能被更好的複用。

所以，當你下次在動手寫元件時，一定不要忽略了函式元件，應該儘可能多地使用函式元件。