React函数式组件两种Props定义方式的显著差异探究

这两种Props定义方式存在显著的类型检查差异，具体区别如下：

• 第一种写法：仅给函数参数指定Props类型

  const UserPanel: React.FunctionComponent = (props: Props) => (
      <div>{props.username}</div>
  );
  

  • React.FunctionComponent未传入泛型参数，会默认给组件添加children属性（即便你的Props接口里没定义），外部传入children时TypeScript不会报错
  • 组件的整体类型未与Props绑定，在组件作为参数传递、复用等场景下，TypeScript无法正确推导组件的Props约束
  • 仅函数内部的props会被类型校验，组件本身的类型信息不完整

• 第二种写法：通过泛型绑定组件的Props类型

  const UserPanel: React.FunctionComponent<Props> = (props) => (
      <div>{props.age}</div>
  );
  

  • 组件的Props被严格限定为Props接口的内容，不会自动添加children（除非接口显式定义），外部传入未声明的属性会直接触发TypeScript错误
  • 组件的整体类型与Props完全绑定，TypeScript能准确推导组件的Props约束，在高阶组件、组件复用等场景下类型检查更严谨
  • 函数参数props无需显式指定类型，会自动从泛型参数推导而来，写法更简洁

另外补充：React官方现在更推荐使用React.FC作为React.FunctionComponent的简写，两者功能完全一致。

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