🧨 写了这么多代码，我为什么越来越累了？
“不是我不想高效，是我明明写了很多，却总感觉没有产出。”
前端开发的世界总是卷得飞起：
-
新框架、新工具层出不穷
-
每天 commit 代码、写页面、修 bug、调样式
-
明明在“做事”，却感觉越来越累，越来越空
我开始反思：到底是哪里出了问题？****
📌 写代码不是问题，问题是「写得没有结构」
很多人（包括曾经的我）写代码像这样：
-
页面来了，直接复制之前的组件改一改
-
样式不对，就加一行覆盖掉
-
状态不对，就加一个 useEffect 兜一下
-
路由 / store / API 写得越来越多，越来越散
于是最后项目变成：
“能跑，但我不敢改。”
⚠️ 累的根源：每一行代码都在“填坑”，没有“搭楼”
你是在开发，但你没在构建。
✅ 后来我开始换一个思路写代码
✅ 1. 优先写逻辑模块，不写 UI
比如页面数据请求逻辑、表单处理、状态变化，我先封装：
export function useExpenseQuery({ from, to }) {
const data = useQuery(['expense', from, to], () => getExpenses(from, to));
return data;
}
然后再把这些逻辑用在页面中，而不是直接埋在组件里。
✅ 2. 所有状态都可复用（用 hooks 封装）
export function useModalState() {
const [open, setOpen] = useState(false);
const toggle = () => setOpen(o => !o);
return { open, toggle };
}
这比 props drilling 强太多。
✅ 3. 所有 UI 都变成函数 + class 工具（不是组件）
export function useButtonClass(type: 'primary' | 'danger') {
return type === 'primary'
? 'bg-blue-600 text-white px-4 py-2'
: 'bg-red-500 text-white px-4 py-2';
}
样式是“数据”，就该用函数来描述。
📦 项目实践：我的项目结构越来越清晰
我开始在自己的项目（比如 gix、ixiu）中强制自己这样写：
-
UI：纯展示
-
状态：纯 hooks
-
数据：集中模块
-
样式：统一 class 函数
结果是：
- 代码可维护 ✅
- 重用效率高 ✅
- 写起来更轻松 ✅
🧠 最后总结一句：
你不是写得太少，而是结构太乱。
写得多≠效率高，写得结构清晰，才是真的高效。
如果你也开始觉得累，不妨把代码“拆开点写”，你会发现代码量没变，效率却翻倍了。
