驯服野兽：我如何重构凌乱的 React 组件

发布日期： 2024-08-19 阅读量： 作者： 网络

驯服野兽：我如何重构凌乱的 react 组件

我们都去过那里。你打开几个月前编写的 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 };
}

相关栏目：【 SEO优化45326 】【技术教程24582 】【 IDC资讯40819 】【网络快讯5029 】【 SEO推广5016 】

上一篇: 微信人名旁边有个图标是什么意思

驯服野兽：我如何重构凌乱的 React 组件

随便看看