React 怎么区分导入的是组件还是函数，或者是对象

一、最直观：依靠社区命名规范（一眼就能区分）

前端社区有约定俗成的命名规则，不同类型的成员会有明显的命名特征，这是最快捷的判断方式：

类型	命名特征	例子
React 组件	首字母大写（类组件/函数组件均遵循）	Layout、Button、Outlet、Header
函数（含 Hooks）	1. Hooks：以 use 开头 + 驼峰（首字母小写） 2. 普通函数：驼峰（首字母小写）	Hooks：useNavigate、useLocation、useToken 普通函数：navigate、getUserList
对象	首字母小写（驼峰），或包含多个子成员的容器	theme、Layout（特殊：既是组件也是对象）、axios

举个例子（结合你之前的代码）：

// 1. 首字母大写 → React 组件
import { Layout, Button, Menu, Outlet } from 'antd';
import { Outlet } from 'react-router-dom';

// 2. 以 use 开头 → React Hooks（本质是函数）
import { useNavigate, useLocation } from 'react-router-dom';
import { theme } from 'antd';
const { token } = theme.useToken(); // useToken 是 Hooks（函数）

// 3. 首字母小写 → 对象
import { theme } from 'antd';
import axios from 'axios';

特殊情况 ：Layout 既是React 组件 （首字母大写，可直接用 <Layout />），又是包含子组件的对象 （有 Layout.Header 等属性），这种是 AntD 这类组件库的特殊设计，属于少数情况。

其他命名规范：

作为新手开发，掌握一套统一、规范的命名规则能让你的代码更易读、易维护，也能和团队协作更顺畅。前端开发的命名规范覆盖变量、函数、组件、文件、类型 等多个维度，我会按照核心原则+分场景规范 的结构，给你整理一份新手友好、覆盖全面的命名指南，每个场景都附带示例+禁忌，方便你直接参考。

一、命名的核心通用原则（先记这5条，所有场景都适用）

这是所有命名的基础，无论什么类型的命名，都要遵循：

1. 语义化优先 ：名称要能直接表达含义，不要用无意义的字母（如a、b、temp），让别人看名字就知道作用。
2. 避免拼音/中文拼音混合 ：优先用英文（除非团队约定），比如不用yongHuList，要用userList。
3. 避免过度缩写 ：只使用通用缩写（如api、url、id、btn、num），不要自创缩写（比如不用usr代替user，不用fn代替function）。
4. 区分大小写，不使用下划线（除常量/文件命名） ：前端主流用驼峰命名，下划线仅在特定场景使用。
5. 保持一致性 ：同一项目中，相同含义的命名要统一（比如不要一会用userList，一会用userArr）。

---

二、分场景命名规范（附示例+禁忌）

1. 变量命名规范

变量类型	命名规则	正确示例	错误示例
普通变量	小驼峰命名（首字母小写，后续单词首字母大写）+ 语义化	userName、productPrice	username（连写）、uName（缩写）、用户名称（中文）
布尔变量	前缀用is/has/should/can + 语义化（表达"是否/有无/应该/能否"）	isLogin、hasPermission、shouldUpdate	login（无法判断布尔）、permission、update
数组/集合	复数名词 + 小驼峰（或加list/arr后缀，新手推荐）	userList、productArr、categories	user（单数）、userArray（冗余，list更简洁）
对象	单数名词 + 小驼峰（表达单个实体）	user、product、config	users（复数，适合数组）、userObj（冗余）
临时变量（循环）	简单语义化（如item、i，仅在循环内使用，不推荐全局用）	for (const item of userList)、for (let i = 0; i < 10; i++)	for (const x of userList)（无意义）

2. 函数/方法命名规范

函数命名要体现动作+结果，让别人知道函数是做什么的。

函数类型	命名规则	正确示例	错误示例
普通函数（执行操作）	动词+名词（小驼峰），常用动词：get、set、add、delete、update、create、fetch	getUserList、addProduct、updateUserInfo	userList（无动词）、getuserlist（连写）、delUser（缩写，用delete更清晰）
异步函数	可加async前缀（或用fetch/request动词，新手推荐）	asyncGetUser、fetchUserList、requestProductData	getUser（无法区分同步异步）
React Hooks（自定义）	必须以use开头 + 驼峰（和内置Hooks保持一致）	useUser、useLocalStorage、useTheme	userHook、getUser（无use前缀）
事件处理函数	前缀handle + 事件名 + 动作（或on+事件名，组件Props中用）	handleClick、handleSubmit、handleInputChange	click、submitForm（无handle前缀）
返回布尔值的函数	前缀is/has/check + 语义化（和布尔变量类似）	isUserAdmin、hasProductStock、checkFormValid	userAdmin、productStock

3. 常量命名规范

常量是指值不会改变的量（如配置项、固定数值），前端主流用大驼峰（帕斯卡）或全大写+下划线（后者更通用）。

常量类型	命名规则	正确示例	错误示例
普通常量	全大写 + 下划线分隔（推荐），或大驼峰	MAX_SIZE、API_BASE_URL、DEFAULT_PAGE_SIZE	maxSize（小驼峰）、max_size（小写+下划线）、defaultPageSize（驼峰，虽可用但不如全大写直观）
枚举常量（TS）	大驼峰（枚举名）+ 大驼峰（枚举值）	enum UserRole { Admin, User, Guest }	enum userRole { admin, user }（小写）

4. React 专属命名规范

React 有特殊的命名约定，新手要重点记：

类型	命名规则	正确示例	错误示例
组件	大驼峰（帕斯卡命名，首字母大写）+ 单数名词（组件是单个实体）	UserList、LoginForm、ButtonGroup	userList（小驼峰）、login_form（下划线）、UserLists（复数）
组件Props	小驼峰（和变量一致），布尔Props用is/has前缀	userName、isDisabled、hasTitle	UserName（大驼峰）、disabled（无is前缀）
状态（state）	小驼峰，和变量命名一致，动作类状态加loading/error后缀	userList、loginLoading、formError	UserList（大驼峰）、loading（无语义）
路由路径	小写 + 连字符（kebab-case），或小写 + 下划线（推荐连字符，符合URL规范）	/user-list、/login-form、/product-detail	/userList（驼峰）、/UserList（大驼峰）

5. TypeScript 接口/类型命名规范

TS 的接口（interface）和类型（type）命名有明确约定，主要用大驼峰，并加特定后缀区分：

类型	命名规则	正确示例	错误示例
接口（interface）	大驼峰 + 名词（可加I前缀，团队约定即可，推荐不加，更简洁）	interface User {}、interface ProductInfo {}	interface user {}（小驼峰）、interface IUser {}（加I前缀，虽常见但非必须）
类型别名（type）	大驼峰 + 名词（和接口一致），联合类型加Type后缀	type UserForm = Omit<User, 'id'>、`type StatusType = 'success'	'error'`
泛型（Generic）	单个大写字母（通用：T、U、V）或语义化大驼峰	function getArray<T>(data: T): T[]、function getUser<T extends User>(id: number): T	function getArray<t>(data: t): t[]（小写）、function getArray<Data>(data: Data): Data[]（语义化也可）

6. 文件/目录命名规范

文件和目录的命名要和项目类型匹配，前端主流有三种风格，同一项目只选一种：

场景	命名规则	正确示例	错误示例
React 组件文件	大驼峰（和组件名一致），或小写 + 连字符（推荐大驼峰，和组件名对应）	UserList.tsx、LoginForm.tsx	userList.tsx（小驼峰）、login_form.tsx（下划线）
普通脚本文件	小驼峰或小写 + 连字符（推荐连字符，更易读）	user-api.ts、utils.ts、form-validation.ts	UserApi.ts（大驼峰）、userApi.ts（小驼峰，可但连字符更直观）
目录命名	小写 + 连字符（推荐），或小驼峰	src/pages/user-list、src/components/button-group、src/api	src/pages/UserList（大驼峰）、src/pages/user_list（下划线）
工具类文件	统一用utils.ts、helpers.ts（不要用tool.ts、func.ts）	src/utils.ts、src/hooks/use-utils.ts	src/tool.ts、src/functions.ts

7. CSS/样式命名规范

CSS 命名主流用BEM命名法（块-元素-修饰符），CSS-in-JS 则和变量命名一致（小驼峰）：

类型	命名规则	正确示例	错误示例
BEM 命名（CSS）	块：小写 + 连字符；元素：__分隔；修饰符：--分隔	.user-card（块）、.user-card__name（元素）、.user-card--active（修饰符）	.userCard（驼峰）、.user_card（下划线）、.user-card-active（无--）
CSS-in-JS（React）	小驼峰（和变量一致）	const styles = { userCard: { background: 'white' }, userName: { fontSize: 14 } }	const styles = { user_card: { background: 'white' } }（下划线）
CSS 变量	小写 + 连字符（和CSS命名一致）	--color-bg-container、--border-radius-lg	--colorBgContainer（驼峰）、--color_bg_container（下划线）

8. 接口/数据库字段命名规范（前后端交互）

和后端协作时，字段命名要统一，主流用小驼峰 或蛇形命名（小写+下划线），后端常用蛇形，前端可通过工具转换：

类型	命名规则	正确示例	错误示例
接口请求/响应字段	小驼峰（前端）/蛇形（后端），统一即可	userName（驼峰）、user_name（蛇形）	UserName（大驼峰）、user-name（连字符）
数据库表名	蛇形（小写+下划线）+ 复数名词	user_info、product_list	userInfo（驼峰）、UserInfo（大驼峰）
数据库字段名	蛇形（小写+下划线）+ 单数名词	user_id、product_name	userId（驼峰）、USER_ID（全大写）

---

总结

新手必记的核心命名要点

1. 大小写 ：组件/接口/类型用大驼峰 ，变量/函数用小驼峰 ，常量用全大写+下划线。
2. 语义化 ：变量/函数名要体现"是什么/做什么"，布尔变量/函数加is/has前缀，函数加动词前缀。
3. 场景适配：React组件文件和组件名保持大驼峰一致，CSS用BEM命名，前后端字段统一驼峰/蛇形。
4. 一致性：同一项目中选择一种风格并坚持到底，不要混合使用驼峰、下划线、连字符。