一个页面从几十行增长到几百行时，最容易出现的问题不是代码太长，而是所有变化都互相影响。

先划分职责

我通常先把页面分成数据获取、交互状态、展示区域和通用组件四层。页面组件只负责组织结构，业务逻辑放进独立函数或服务中。

避免过度抽象

并不是每一段 JSX 都值得成为组件。只有当一块界面具备明确语义、需要复用，或者拥有独立状态时，拆分才真正有价值。

保持数据流清晰

状态尽量靠近使用它的地方。跨越多个区域共享的数据，再提升到共同父级。这样既减少无效渲染，也让后续修改更容易定位。

好的模块化不是让目录变得复杂，而是让每次修改都只影响一个清晰的范围。