首頁  >  文章  >  web前端  >  馴服野獸:我該如何重構凌亂的 React 元件

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

WBOY
WBOY原創
2024-08-19 17:13:331092瀏覽

Taming the Beast: How I Refactored a Messy React Component

我們都去過那裡。你打開幾個月前編寫的 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 <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;
}

最後的談話

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

這次經驗讓我學到了一些重要的教訓:

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

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

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

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

以上是馴服野獸:我該如何重構凌亂的 React 元件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn