React 與 Vanilla JavaScript 分離關注點的不同 | React

在軟體開發中，分離關注點（Separation of Concerns）是一個重要的設計原則，它有助於保持程式碼的清晰、易於維護和擴展。React 和 Vanilla JavaScript 是兩種常見的前端開發方式，它們在處理分離關注點上有著不同的方法。本文將探討 React 和 Vanilla JavaScript 中分離關注點的不同之處，並附上簡易範例來說明。

React 中的分離關注點

在 React 中，分離關注點是透過組件化(Component)來實現的。每個 React 組件都應該專注於單一功能，並負責處理其自身的狀態管理、UI 邏輯和生命週期方法。這樣的設計使得程式碼更具可讀性和可維護性，同時也使得單元測試更容易進行。

以下是一個簡單的 React 組件範例：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

在這個範例中，Counter 組件專注於計數器的功能。它管理了一個狀態 count，並提供了兩個按鈕來增加和減少計數器的值。這個組件的責任清晰明確，易於理解和測試。

Vanilla JavaScript 中的分離關注點

在 Vanilla JavaScript 中，分離關注點通常是通過將功能分解為不同的函數或物件來實現的。開發人員需要自行管理狀態和 UI 邏輯，並確保程式碼結構清晰。

以下是一個使用 Vanilla JavaScript 實現的計數器範例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vanilla JavaScript Counter</title>
</head>
<body>
  <div id="counter">
    <p>Count: <span id="count">0</span></p>
    <button id="increment">Increment</button>
    <button id="decrement">Decrement</button>
  </div>

  <script>
    const countElement = document.getElementById('count');
    let count = 0;

    function updateCount() {
      countElement.textContent = count;
    }

    function increment() {
      count++;
      updateCount();
    }

    function decrement() {
      count--;
      updateCount();
    }

    document.getElementById('increment').addEventListener('click', increment);
    document.getElementById('decrement').addEventListener('click', decrement);
  </script>
</body>
</html>

在這個範例中，我們通過函數 increment 和 decrement 來管理計數器的狀態，並使用 updateCount 函數來更新 UI。雖然這種方式比起 React 的組件化更加原始，但也可以達到分離關注點的目的。

總結

React 和 Vanilla JavaScript 都可以實現分離關注點，但它們的方法略有不同。React 通過組件化來實現，而 Vanilla JavaScript 則通過函數或物件的組合來實現。選擇哪一種方法取決於項目的需求和開發團隊的偏好，但重要的是保持程式碼的結構清晰，易於理解和維護。