我们都去过那里。你打开几个月前编写的 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中文网其他相关文章!