我们都去过那里。你打开几个月前编写的 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）保留不同的关注点使代码更加模块化、可重用和可测试。

• 保持简单：通过将逻辑卸载到更小的函数来简化渲染函数，使组件更具可读性。

所以，如果你有一个像你一样混乱的组件，请毫不犹豫地重构。这不仅仅是关于干净的代码，而是让您作为开发人员的生活更轻松。谁不想要这样？