一、组件就是函数——从 SFC 到普通函数

Vue 的组件是一个 .vue 文件或 defineComponent 对象；React 的组件更朴素——就是一个返回 JSX 的普通函数。从这一篇讲清楚来看，怎么定义组件、怎么声明和接收 props、还有 Vue 开发者最想问的那些问题。

💡 痛点：Vue 里有 SFC 结构。React 只剩函数，如何快速适应？按理说，

// React: Hello.jsx
function Hello {
return 

Hello,{props.name}
}
export default Hello;

• 组件名必须大写开头；
• 函数接收一个 props 对象参数；
• 返回 JSX。说起来，

⚠️ 痛点：忘记大写会导致 JSX 被解析为字符串。而不是组件，

使用方式示例

二、Props：从 defineProps 到函数参数解构

🧐 痛点：Vue 的属性声明方式与 React 完全不同，如何快速切换思路？

🔄 Vue 自动做 camelCase↔kebab-case 转换，React 没有这一步骤。

// 常用写法：直接在参数里解构
function UserCard {
return (


{name}，{age} 岁

);}

💬 在 React 中传递非字符串值需要使用大括号，例如数组、布尔值。

// 字符串直接写

// 其他类型用大括号

三、默认值与“必填”——JS 解构 + TypeScript 校验

❓ Vue 支持 'required';按理说，React 如何实现？答案是通过 TypeScript 或 PropTypes。其实，

function Button({
type = 'button'。
size = 'medium',children,}) {
return (

{children}

);}

📌 默认值要在解构时给出，否则会得到

TypeScript 示例

interface ButtonProps {
说到type?，'button' | 'submit';size，: 'small' | 'medium' | 'large';children: React.ReactNode;}
function Button({
type = 'button',size = 'medium',children。}: ButtonProps) {
return (

{children}

);}

No runtime prop validation unless you add a library.

四、children：对应 Vue 的默认插槽

Vue 用 接收父组件传入的内容。React 中，标签之间的内容会自动作为 {props.children} 传入：

内容

// React
function Card {
return (

{children}

);}
// 使用

孩子元素是一个普通 prop，你可以像处理任何值一样处理它。具名插槽、作用域插槽等高级用法将在后续章节讨论。

🚧 如何在多个子元素中仅选择某个特定位置的节点？需要借助 refs 或 Children API。

再看"子传父"，“emit”去哪了？—— 用回调函数传递事件处理器

js // Vue 子组件示例