馴服野獸：我該如何重構凌亂的 React 元件-js教程-PHP中文網

馴服野獸：我該如何重構凌亂的 React 元件

WBOY

發布： 2024-08-19 17:13:33

原創

970 人瀏覽過

Taming the Beast: How I Refactored a Messy React Component

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

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

最初的恐怖

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

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

分解它

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

狀態管理：處理元件的狀態與 UI 邏輯交織在一起。
API 呼叫：取得資料並處理載入狀態。
渲染 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 <p>Loading...</p>;
}

function renderError(error) {
  return <p>Error: {error.message}</p>;
}

function renderData(data) {
  return <div>{/* Complex UI logic here */}</div>;
}
//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;
}

登入後複製