我们都去过那里。你打开几个月前编写的 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 };}
通过 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 shapefunction 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 多行减少到大约 124124 行，逻辑也更容易理解。该组件现在只做一件事：渲染 ui。其他所有内容都已卸载到自定义挂钩和实用函数。
这次经历让我学到了一些重要的教训：
不要害怕重构：很容易将混乱的代码保留原样，尤其是当它有效时。但花时间清理它会让您的生活以及未来的自己的生活变得更加轻松。
关注点分离：将不同的关注点保留在不同的地方（状态、api、ui）使代码更加模块化、可重用和可测试。
保持简单：通过将逻辑卸载到更小的函数来简化渲染函数，使组件更具可读性。
所以，如果你有一个像你一样乱七八糟的组件，请毫不犹豫地重构。这不仅仅是关于干净的代码，而是让您作为开发人员的生活更轻松。谁不想要这样？
以上就是驯服野兽：我如何重构凌乱的 React 组件的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1490577.html
微信扫一扫 
支付宝扫一扫 
