Button还是FormInputreact-folder-structure共享组件层ui/form双层设计命名与复用完整指南【免费下载链接】react-folder-structure项目地址: https://gitcode.com/gh_mirrors/re/react-folder-structurereact-folder-structure 是一个 React 项目文件夹结构参考仓库用 beginner / intermediate / advanced 三个由浅入深的示例工程演示共享组件层如何用ui/与form/双层目录组织组件。本文带你快速搞懂Button 为什么在ui/层、FormInput 为什么在form/层以及共享组件的命名与复用规则。一、为什么共享组件要分 ui/ 和 form/ 两层想象一个components/文件夹里堆着 14 个文件Button、Modal、FormInput、Checkbox……找起来全靠滚动。react-folder-structure 的解法是按组件的性格分两层ui/层通用交互组件——按钮、弹窗、下拉框谁都能用form/层表单输入组件——专门服务表单场景的输入控件这样目录本身就是一份说明书打开components/后两秒钟就能定位要找的组件。 对比三个层级的目录演进这是理解该仓库的核心视角层级组件目录组织方式特点beginner/全部平铺在beginner/src/components/简单直接适合练手intermediate/拆分为intermediate/src/components/ui/和form/共享组件按职责分层advanced/在 ui/form 基础上再抽features/功能模块共享层 业务层分离二、ui 层通用交互组件Button 放这里advanced/src/components/ui/下共 4 个组件advanced/src/components/ui/Button.js—— 基础按钮advanced/src/components/ui/ButtonGroup.js—— 按钮组advanced/src/components/ui/Dropdown.js—— 下拉菜单advanced/src/components/ui/Modal.js—— 弹窗它们的共同点不绑定表单场景。登录页、设置页、项目列表页都可以直接复用属于全站通货。三、form 层表单输入组件FormInput 放这里advanced/src/components/form/下共 4 个组件advanced/src/components/form/FormInput.js—— 文本输入框advanced/src/components/form/FormSelect.js—— 下拉选择框advanced/src/components/form/Checkbox.js—— 复选框advanced/src/components/form/RadioButton.js—— 单选框 这一层的定位是表单零件盒凡是登录、注册、设置这类需要收集用户输入的功能都从这里取控件。比如advanced/src/features/settings/components/SettingsForm.js和advanced/src/features/authentication/components/LoginForm.js都是典型的使用方。四、命名规则如何一眼看懂组件属于哪层组件所在层命名逻辑Buttonui/无前缀名称即用途FormInput / FormSelectform/Form前缀强调表单语境Checkbox / RadioButtonform/直接用 HTML 原生控件名三条实用规则目录优先于前缀组件放哪层由职责决定名字只是提示Form前缀不是必须但加上能强化这是表单件的心智共享层不放业务件注意 beginner 平铺的components/里有Home.js、TodoList.js到了 intermediate/advanced这类页面级组件被移去了intermediate/src/pages/或advanced/src/features/共享层只留无业务含义的纯组件同名即同义Button 在三个层级中命名完全一致方便对照学习结构演进五、复用指南谁可以引用 ui/ 和 form/页面与功能模块intermediate/src/pages/Home/index.js、advanced/src/features/projects/等均可 import 共享层的 ui/form 组件跨功能复用一个 Button 同时被 todos、settings、authentication 使用正是它住在共享层而非某个 feature 内的意义演进路径项目小时用 beginner 式平铺组件超过 10 个、开始出现表单控件 vs 交互控件的混淆时升级到 intermediate 式 ui/form 分层业务功能增多后再学 advanced 的 features 拆分六、新手避坑清单⚠️ 不要把TodoItem.js这类带业务语义的组件放进共享components/层⚠️ 不要在form/层里塞一个按钮——它属于ui/层✅ 新增组件前先问这个组件会被几个功能使用 答案是 1 个放 feature 内答案是多个放共享层掌握 ui/form 双层设计你就拥有了判断组件该放哪、叫什么的第一套标准。可以沿着beginner/→intermediate/→advanced/逐级对照目录把结构演进思路吃透。【免费下载链接】react-folder-structure项目地址: https://gitcode.com/gh_mirrors/re/react-folder-structure创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考