Day 27 React 的純函數元件

今天要解釋的東西會比較無聊乏味一點，但在 React 元件化導向的框架裡卻是一個很重要的概念，因為元件具有可以重複使用的特性，所以如果不是純函示會有一些 Bug 存在。

純函式的特性

純函式是一個在軟體開發中的重要概念，它有以下主要特點：

1. 相同的輸入始終產生相同的輸出： 當你將相同的輸入值傳遞給一個純函式時，它始終會返回相同的輸出，不受外部狀態的影響。這種可預測性對於測試和除錯非常重要，因為你可以確信函式的行為不會因為外部狀態的改變而變化。

2. 不會修改外部狀態： 純函式不會修改或影響除了它的輸入參數以外的任何狀態。這意味著它不會修改全域變數、不會修改傳遞給它的物件或陣列，也不會修改任何外部狀態。

3. 沒有副作用： 純函式不會引起任何副作用，如改變資料庫的數據、發送 HTTP 請求、修改文件系統等。它僅僅是通過計算返回一個值。

4. 可組合性： 由於純函式不依賴於外部狀態，它們非常容易組合在一起建構更複雜的邏輯。這種特性使得代碼更容易維護、測試和重用。

解釋了那麼多，我相信大家看了眼睛都花了而且一頭霧水，簡單舉例如下:
這就是一個純函式，不會修改外部狀態、沒有副作用、相同輸入有相同輸出

function add(a, b) {
  return a + b;
}

這個 add 函式是純函式，因為它始終返回相同的輸出（兩個數字的和），不修改外部狀態，也不產生副作用。

那不是純函式又會發生什麼事呢?範例如下:

let total = 0;

function addToTotal(num) {
  total += num;
  return total;
}

console.log(addToTotal(3)); // 第一次呼叫，返回 3
console.log(addToTotal(3)); // 第二次呼叫，返回 6

這就不是一個純函式，因為它會改變外部狀態而且，相同的輸入得到不同的輸出。

那想一想如果它是一個元件，我們重複使用三次會發生什麼事?
範例如下:

let total = 0;

function AddToTotal() {
  total += 1;
  return <h2>&#123;total&#125;</h2>;
&#125;

function App() &#123;
  return (
    <div>
      <h1>引入第一次</h1>
      <AddToTotal /> //2
      <h1>引入第二次</h1>
      <AddToTotal /> //4
      <h1>引入第三次</h1>
      <AddToTotal /> //6
    </div>
  );
&#125;

export default App;

就會發現明明就是引入同一個元件，但是會產生不同的結果，這會在重複使用這個元件特性上，造成無法預期的錯誤，所以 react 會鼓勵元件的寫法都要以純函式為主。

總結

雖然無聊或是繁瑣，但是如果發生想不到的錯誤就來檢查看看是不是純函式的問題，但後續其實有相對應的解法，但也續本系列不會提到，但是不純的函式在 react 元件中應該盡量被避免的。