React 中被忽略的函數組件（Functional Components）

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渲染，理想狀況下，全部的組件都是展現性組件，每一個頁面都是由這些展現性組件組合而成。若是一個組件是函數組件，那麼它固然知足這個要求。因此牢記函數組件的概念，可讓你在寫組件時，先思考這個組件應不該該是展現性組件。更多的展現性組件意味着更多的組件有更簡潔的結構，更多的組件能被更好的複用。

因此，當你下次在動手寫組件時，必定不要忽略了函數組件，應該儘量多地使用函數組件。

---

歡迎關注個人公衆號：老幹部的大前端，領取21本大前端精選書籍！