我們都去過那裡。你打開幾個月前編寫的 React 元件,感覺就像你正在看一個由匆忙的人編寫的程式碼 - 因為你可能很匆忙。截止日期迫在眉睫,功能需要交付。快轉到今天,是時候重建那個混亂的元件了。
所以,這就是我解決這個問題的方法。
我注意到的第一件事是該組件變得太大了。它嘗試做所有事情,例如處理狀態、進行 API 呼叫、管理複雜的 UI 邏輯,甚至直接套用樣式。這是一個超過 540 行的文件,通讀它就像在沒有地圖的叢林中漫步一樣。
第一步是接受現實:這段程式碼不再可維護。如果我(寫這篇文章的人)幾乎無法理解正在發生的事情,那麼其他人就沒有機會。所以,我決定把它分解。
我先確定了組件的不同職責。共有三個明確的區域:
狀態管理:處理元件的狀態與 UI 邏輯交織在一起。
API 呼叫:取得資料並處理載入狀態。
渲染 UI:以稍微複雜的 UI 結構顯示資料。
這些職責中的每一個都需要分開。
我做的第一件事是將狀態管理和 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中文網其他相關文章!