我們都去過那裡。你打開幾個月前編寫的 React 元件，感覺就像你正在看一個由匆忙的人編寫的程式碼 - 因為你可能很匆忙。截止日期迫在眉睫，功能需要交付。快轉到今天，是時候重建那個混亂的元件了。

所以，這就是我解決這個問題的方法。

最初的恐怖

我注意到的第一件事是該組件變得太大了。它嘗試做所有事情，例如處理狀態、進行 API 呼叫、管理複雜的 UI 邏輯，甚至直接套用樣式。這是一個超過 540 行的文件，通讀它就像在沒有地圖的叢林中漫步一樣。

第一步是接受現實：這段程式碼不再可維護。如果我（寫這篇文章的人）幾乎無法理解正在發生的事情，那麼其他人就沒有機會。所以，我決定把它分解。

分解它

我先確定組件的不同職責。共有三個明確的區域：

1. 狀態管理：處理元件的狀態與 UI 邏輯交織在一起。

2. API呼叫：取得資料並處理載入狀態。

3. 渲染 UI：以稍微複雜的 UI 結構顯示資料。
   這些職責中的每一個都需要分開。

提取狀態和 API 邏輯的鉤子

我做的第一件事是將狀態管理和 API 邏輯提取到自訂掛鉤中。這不僅清理了元件，而且還使在其他地方測試和重複使用邏輯變得更容易。

這裡提到一些程式碼（不是原來的程式碼）：

function useDataFetching(apiEndpoint) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        let response = await fetch(apiEndpoint);
        let result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, [apiEndpoint]);

  return { data, loading, error };
}

透過useDataFetching，我提取了API呼叫邏輯並處理了載入和錯誤狀態。現在，元件只需要呼叫這個鉤子並取得必要的數據，乾淨又簡單。

簡化 UI 邏輯
接下來，我查看了渲染邏輯。以前，我在渲染函數中檢查載入、錯誤和數據，這使得它很難理解。我將這個邏輯分成小的、獨立的函數，就像這樣（當然不是原來的函數；）

function renderLoading() {
  return 
Loading...
;
}

function renderError(error) {
  return 
Error: {error.message}
;
}

function renderData(data) {
  return 
{/* Complex UI logic here */}
;
}
//After that, component is ni much pretty shape

function MyComponent() {
  const { data, loading, error } = useDataFetching('/api/data-endpoint');

  if (loading) return renderLoading();
  if (error) return renderError(error);
  if (data) return renderData(data);

  return null;
}

最後的談話

分解元件後，檔案從 540 多行減少到大約 124 行，邏輯也更容易理解。該元件現在只做一件事：渲染 UI。其他所有內容都已卸載到自訂掛鉤和實用函數。

這次經歷讓我學到了一些重要的教訓：

• 不要害怕重構：很容易保留混亂的程式碼，尤其是當它有效時。但花時間清理它會讓你的生活——以及你未來的自己的生活——變得更加輕鬆。

• 關注點分離：在不同的地方（狀態、API、UI）保留不同的關注點使程式碼更加模組化、可重複使用和可測試。

• 保持簡單：透過將邏輯卸載到更小的函數來簡化渲染函數，使元件更具可讀性。

所以，如果你有一個像你一樣混亂的元件，請毫不猶豫地重構。這不僅僅是關於乾淨的程式碼，而是讓您作為開發人員的生活更輕鬆。誰不想要這樣？