组件

它到底指什么？

看看你面前的网页——导航栏、搜索框、文章卡片、底部页脚——每一块在代码层面都可以是一个独立的"组件"。

组件就像乐高积木：每一块积木有自己的形状和颜色（独立的结构和样式），你可以把同一块积木用在不同的地方（复用），也可以把多块积木拼在一起组成更大的结构（组合）。

在代码中，一个组件通常就是一个文件——比如 Button.tsx 定义了按钮的样子和点击行为，NavBar.tsx 定义了导航栏的结构。然后在页面文件中，你把这些组件像拼积木一样组合在一起。

为什么这种方式好？

如果你把整个页面的所有代码都写在一个文件里，随着页面变复杂，这个文件会变得越来越长、越来越难维护。组件化解决了这个问题——每个组件只关心自己的那一小块，改一个按钮的样式不需要翻阅整个页面的代码。

而且组件是可复用的。同一个 Button 组件可以出现在登录页、设置页、购物车——不需要每个地方都重新写一遍。

有什么需要注意的？

当 AI 帮你写前端代码时，你会看到大量的组件文件。不需要每个都弄懂——先关注那些直接和你的需求相关的。如果 AI 创建了太多层嵌套的组件，让代码变得难以追踪，可以让它简化结构。