停止泄漏组件的秘密：在 React 中引入 KIP 模式

Source: Dev.to

如何将 React 组件视为严格的微域，以彻底根除 “God File” 反模式。

我们都有过这种经历。你开始构建一个简单的 React 组件。起初它只是 UI。随后你加入了一些状态。接着出现了自定义接口。还有一个用于格式化日期的辅助函数。三周后，你原本天真的 UserProfile.tsx 已经变成了一个 1,000 行的 “God File”。

为了解决这个问题，你把文件拆分了。你创建了 useUserProfile.ts 和 userProfileUtils.ts。但这些内部文件突然出现在共享文件夹中，污染了全局命名空间，更糟的是——其他开发者开始在与该组件无关的地方导入你的特定工具！组件的内部机密泄露了。

KIP（Keep It Private）模式

KIP 是一种针对 React 的架构模式，强制在组件层面实现 严格封装。它把每个组件——无论大小——都视为一个独立的微域。

• 属于某个组件的逻辑、类型、工具函数和子组件（插槽） 都放在该组件的文件夹内，并显式标记为私有。
• 外部只能通过单一入口与组件交互。

_ 前缀意味着 绝对私有

以下划线开头的文件（例如 _hook.ts、_type.ts、_util.ts、_component.tsx）是该组件的内部实现细节。它们声明：

“我是私有的。请不要在此文件夹之外直接导入我。”

index.ts 是入口

index.ts 文件充当最终的守门人（API 边界）。它从私有的 _ 文件中导入必要内容，并 有选择地导出 给应用的其余部分。

// index.ts (example)
export { default as MyComponent } from './_component';
export type { MyComponentProps } from './_type';

渐进式扩展：从按钮到仪表盘

KIP 适用于简单组件，也适用于复杂组件。只需创建所需的私有作用域，以保持代码整洁。

Level 1 – 简单组件（例如 Button）

Button/
├─ _type.ts
├─ _component.tsx
└─ index.ts

Level 2 – 中等组件（例如 LoginForm）

LoginForm/
├─ _hook.ts
├─ _util.ts
├─ _type.ts
├─ _component.tsx
└─ index.ts

Level 3 – 复杂组件（例如 DataGrid）

DataGrid/
├─ _hook.ts
├─ _util.ts
├─ _type.ts
├─ _store.ts
├─ _slots.tsx
├─ _component.tsx
└─ index.ts

KIP 模式的优势

• 真正的关注点分离（SoC）： 再也没有 1,000 行的文件。逻辑被拆分为专门的微文件，调试更具针对性。
• 通过 index.ts 的 API 边界： 组件表现得像一个严格的 NPM 包；仅导出公共表面。
• 零全局命名空间污染： 仅属于组件的工具函数保存在私有的 _util.ts 中。全局 src/utils 文件夹仅用于真正的全局帮助函数。
• 即时可扩展性： 当组件增长时，只需扩展其私有生态系统，而不会出现腐烂。

不要把组件仅仅当作文件来对待。把它们当作域来对待。保持私有。

想看看实际效果吗？查看 GitHub 上的官方模板：
https://github.com/Miladxsar23/kip-pattern