React：Pure Function 的概念及其在 React 中的應用

Pure Function是甚麼

此函數在相同的輸入值時，需產生相同的輸出。

pure Functions範例如下

javascript

const sum = function (value1, value2) {
    return value1 + value2
}

console.log(sum(100, 200))

不管你傳入幾次得到的結果都一樣
不受外部變數影響

Impure Functions範例則如下

javascript

let Number = 20
const add = function (Value) {
    return Value + Number
}

console.log(add(100))

會在執行的過程中受到Number外部變數的影響

該函數不能有語義上可觀察的函數副作用。

常見的副作用
- Making a HTTP request（發送 HTTP 請求）
- Mutating data（修改資料）
- Printing to a screen or console（輸出至螢幕或控制台）
- DOM Query/Manipulation（DOM 操作）
- Math.random()（使用亂數）
- Getting the current time（取得目前時間）
pure Functions範例如下
Impure Functions(會在執行的過程中產生副作用)

javascript

const revise = function (key, value, object) {
    object[key] = value
}
const food = {
    "name": "banana"
}
console.log(food)
revise("number", 100, food)
console.log(food)

顯示如下：

javascript

{ name: 'banana' }
{ name: 'banana', number: 100 }

Impure Functions會在執行的過程中產生副作用，導致物件產生變更

React跟Pure Function的關係

React中的組件概念使用Pure Function的理念，並且React的 functional components 通常被設計成純函數的形式。
- Props 是唯讀的：父組件向子組件傳遞 props，而子組件不能直接修改這些 props，確保了 props 的不可變性。
- State 控制內部狀態：使用 useState 來管理組件的內部狀態，React 確保了state的不可變性和純粹性。每次狀態發生改變，React 都會根據新的狀態重新渲染組件，確保渲染的結果是基於當前的應用狀態而生成的，並保證了渲染的一致性。
若直接更改obj.count將無法導致渲染，進而無法讓UI顯示最新狀態。

javascript

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [obj, setObj] = useState({ count: 0 });
  function clickPlus1() {
    // obj.count = obj.count + 1;
    // ↑ 直接改變 obj 時並沒有改變這個 obj 的reference，所以雖然數字改變了，但並不會重新 render
    setObj({ count: obj.count + 1 });
  }

  return (
    <div className="App">
      <h2>{obj.count}</h2>
      <button onClick={() => clickPlus1()}>plus 1</button>
    </div>
  );
}

Pure Function是甚麼

React跟Pure Function的關係

留言