你可能会说
这个按钮在十个页面都用到了，帮我封装成一个通用组件。
组件是 UI 的独立积木块——封装了结构、样式、行为，可在任何地方复用，改一处全局生效。
把页面拆成一块块可复用的「积木」。比如导航栏是一个组件、按钮是一个组件、卡片是一个组件。改一处，所有用到它的地方都跟着变。
生活类比
像乐高积木——同一个轮子零件可以装在任何车上，不用每次重新造轮子。
🎮 动手试试
页面 = 组件的拼装。每个组件是独立积木，可以复用、可以替换。
关于组件的 Props，以下说法正确的是？
你可以这样告诉 AI
帮我把这个卡片封装成 React 组件，接收 title、image、description 作为 props，支持 hover 上浮效果。
HTML 标签是浏览器内置的（div、p、button），组件是你自定义的可复用 UI 单元（可以包含多个标签）。
模块是 JS 代码组织方式（import/export），组件是 UI 组织方式（渲染界面）。一个模块可以导出多个组件。
重复出现的 UI
按钮、卡片、导航栏等在多处使用的元素
复杂 UI 拆分
把大页面拆成小组件，每个只管自己的逻辑
只用一次的简单元素
一个只出现一次的 <div> 没必要封装成组件
纯样式复用
只是样式相同用 CSS class 即可，不必做成组件
定义组件接受哪些参数（标题、图片、回调函数等）
根据 props 和 state 决定输出什么 UI
组件自己管理的动态数据（是否展开、输入值等）
响应用户操作（点击、输入）的函数
数据由父组件管理，子组件只负责展示和上报事件
组件自己管理内部状态，父组件不干预
多个子组件配合使用，如 <Tabs><Tab/><Tab/></Tabs>