React函数组件的多种定义方式：React v18与TS v5.1+下是否存在显著差异

下面直接拆解三种写法的核心区别：

1. const MyComponent: React.FunctionComponent = () => <div></div> #

• 这是用React官方提供的FunctionComponent（简称FC）接口标记组件类型的写法。
• 最大特点是自动给组件加上children属性的类型——哪怕你没写props参数，TS也会默认允许你在使用组件时传入子元素。如果不需要这个特性，可以通过React.FC<{ children?: never }>来禁用。
• 类型层面会强制组件返回合法的React节点（包括JSX元素、null、undefined这些都算）。

2. const MyComponent2 = (): React.JSX.Element => <div></div> #

• 这种是直接给函数标注返回值类型为JSX.Element。
• 不会自动处理children，如果你的组件需要接收子元素，必须手动声明props的类型，比如(props: { children?: React.ReactNode }) => ...。
• 对返回值要求更严格：只能返回JSX元素，不能返回null或undefined——如果你的组件可能返回空值，得把返回类型改成React.ReactNode。

3. const MyComponent3 = () => <div></div> #

• 这是完全依赖TS类型推断的写法，不用手动加任何类型标注。
• 没写props的话，TS会推断参数为{}，也不会默认支持children；之后如果要加children，必须手动补全类型，不然TS会报错。
• 返回值会被自动推断为JSX.Element，但如果组件里有逻辑返回null/undefined，TS会自动把返回类型调整为React.ReactNode，不用你手动改。

关键差异总结 #

• children处理：只有React.FC会默认带children类型，另外两种都得手动声明。
• 返回值约束：
  • React.FC允许返回所有合法React节点；
  • 标注JSX.Element的写法只允许返回JSX元素；
  • 类型推断的写法会根据实际代码自动适配返回值类型。
• 使用场景：简单组件用类型推断最省心；复杂组件或需要明确约束的场景，用React.FC或显式标注返回值的写法更清晰。

内容的提问来源于stack exchange，提问作者belligol