先搞懂组件是什么组件就是可复用的 UI 积木。就像 HTML 有h1、img这些内置标签React 让你可以自己造标签——比如Profile /、TableOfContents /、NavigationHeader /。⚡ 核心结论一句话React 组件就是一个首字母大写的 JavaScript 函数它返回一段 JSX看起来像 HTML 的标签React 负责把它渲染到页面上。一、定义组件的三步法第一步导出组件export default function Profile() { ... }export default是 JavaScript 标准语法表示这个文件的主要函数就是这个。这样其他文件才能import它。第二步定义函数注意大写function Profile() { // ✅ P 必须大写 // ... }⚠️陷阱组件名必须以大写字母开头否则 React 不认识它会当成普通 HTML 标签处理。第三步添加标签JSXfunction Profile() { return ( img srchttps://react.dev/images/docs/scientists/MK3eW3As.jpg altKatherine Johnson / ); }⚠️陷阱如果return和括号里的 JSX 不在同一行必须用圆括号()包裹否则 JS 会自动加分号导致代码失效。// ✅ 一行搞定 return img src... alt... /; // ✅ 多行必须加括号 return ( img src... alt... / ); // ❌ 错误return 和多行 JSX 之间没括号 return img src... alt... /;二、使用组件定义完Profile后可以在别的组件里直接用function Profile() { return ( img srchttps://react.dev/images/docs/scientists/MK3eW3As.jpg altKatherine Johnson / ); } export default function Gallery() { return ( section h1了不起的科学家/h1 Profile / {/* 用了三次这就是复用 */} Profile / Profile / /section ); }浏览器最终看到的是啥React 会把自定义标签展开成原生 HTMLsectionh1了不起的科学家/h1imgsrc...altKatherine Johnson/imgsrc...altKatherine Johnson/imgsrc...altKatherine Johnson//section怎么区分自定义标签和 HTML 标签写法React 的理解Profile /大写开头 → 找名为Profile的组件img /小写开头 → 原生 HTML 标签section小写开头 → 原生 HTML 标签三、嵌套和组织组件父子关系Gallery父组件 ├── Profile子组件 × 3 └── h1原生标签定义一次到处复用。这是 React 最核心的价值之一。文件组织策略小项目 / 组件相关紧密→ 多个组件写在同一个文件大项目→ 每个组件一个文件通过export/default import管理src/ ├── App.js 根组件 ├── Gallery.js 含 Gallery Profile └── Navigation.js 独立文件四、⚠️ 重要陷阱不要在组件中定义组件// 绝对不要这样做 export default function Gallery() { function Profile() { // ← 嵌套在另一个组件内部 return img src... /; } return Profile /; }为什么不行每次Gallery重新渲染都会创建一个新的Profile函数性能极差会导致 state 丢失等诡异 bug正确做法所有组件都在顶层定义// ✅ 正确全部在顶层 export default function Gallery() { return ( section Profile / /section ); } function Profile() { // ← 平级定义 return img src... /; }五、万物皆组件React 应用中每一块 UI 都是组件粒度示例最小Button /、Icon /中等Sidebar /、Card /最大HomePage /、Dashboard /甚至只有一个页面用到一次的布局也可以写成组件——这只是为了更好地组织代码。基于 React 的框架更进一步CodeSandbox / Vite / CRA→ 根组件在App.jsNext.js→ 根组件在pages/index.js这些框架还会根据 React 组件自动生成服务器端 HTML不需要等 JS 加载完才显示内容 面试高频追问Q1React 组件和普通 JavaScript 函数的区别是什么答本质上都是函数但有两个硬性规定① 名称首字母必须大写② 必须返回 JSX或 null。Q2为什么 return 后面要多行时必须加括号答因为 JavaScript 有自动分号插入ASI机制。如果return和返回值不在同一行JS 会在中间自动加分号导致return后面什么也没返回。加括号可以避免这个问题。Q3什么是 JSX答JSX 是 JavaScript 的语法扩展允许你在 JS 文件中写类似 HTML 的标签。它在底层会被编译为 JavaScript 对象调用React.createElement(...)。Q4组件可以嵌套定义吗答不可以。嵌套定义会导致每次父组件渲染都重建子组件性能差且引发 state 丢失等 bug。所有组件都应该在文件顶层声明。Q5浏览器最终看到的是 JSX 吗答不是。浏览器只看到纯 HTML。React 会把 JSX 转换成 DOM 操作最终渲染的是原生 HTML 元素。 常见面试变体“如何定义一个 React 组件”“JSX 和 HTML 有什么区别”“为什么组件名要大写”“简述 React 组件的渲染流程”“如何在项目中组织和管理组件”✅ 总结你的第一个组件核心要点组件 首字母大写的 JS 函数返回 JSX 定义三步export default→function Name()→return (JSX)使用方式大写组件小写HTML 标签定义一次处处复用——这就是组件化思维所有组件必须在顶层定义禁止嵌套定义多行return必须用( )包裹防止 ASI 坑万物皆组件从按钮到整页都是
