这个 React 小细节居然很多人都写错了？

今天在群里和群友聊天的时候大家聊起了 React + TS 的写法，然后笔者发现好几个同学还在使用如下写法：

const Title: React.FunctionComponent = () => <div>1</div>;const Title: React.FC = () => <div>1</div>;

以上两种 TS 的类型效果是一样的，但是其实在当下已经不推荐使用了。

早在 19 年 12 月，React 就有一个 Remove React.FC from Typescript template^[1] 的 PR。

React.FC is unnecessary: it provides next to no benefits and has a few downsides. (See below.) I see a lot of beginners to TS+React using it, however, and I think that it's usage in this template is a contributing factor to that, as the prominence of this template makes it a de facto source of "best practice".

翻译下来的意思是 React.FC 没啥必要，反而会带来问题。有很多初学者在使用这个类型是因为官方模板里面有用到，以为是个最佳实践。但是实际上是个错误演示，所以得删了。

当然了，时至今日应该还是会有不少开发者还在使用这个类型，可能是看了什么错误的 Demo，也可能是因为维护的代码里之前就是这样写的，发现没啥问题就沿用了。

接下来笔者会举几个例子来说说为啥不建议使用这个类型了。

children 属性

这个类型默认是附带了 children 类型的：

type PropsWithChildren<P> = P & { children?: ReactNode };

这种方式在需要 children 属性的时候确实省事了，但是在不需要 children 的组件中就显得有点多余。告知了外部可以传入 children，但实际这个属性并不会被用到：

const Test: React.FC<{ name: string }> = ({ name }) => {  return <div>{name}</div>}const App = () => <Test name="yck">1</Test>

在以上代码中 Test 组件的 children 属性并没有被内部使用到，但是外部依旧可以传入，没有任何效果的结果会让用户疑惑。

defaultProps 有问题

这个属性在 class 组件中很常用，函数组件中用的不多但是也没说不让用了。

const Test: React.FC<{ name: string }> = ({ name }) => {  return <div>{name}</div>}Test.defaultProps = {  name: "yck"};const App = () => <Test />

对于以上代码来说，如果你打算使用 name 的默认值的话会发现编辑器给你报错了。

因为 React.FC 自带了 defaultProps 属性，如果你想使用默认值的话就挂了。

多写代码

实际上你把 Test 组件改写成如下方式是基本没有区别的，还少写了好几句代码：

const Test = ({ name }: { name: string }) => {  return <div>{name}</div>}

无非需要使用 children 属性的时候改下类型。

如何快速迁移

既然 React.FC 官方都不建议用了，我们还是尽快换成推荐的写法吧，大家可以使用这个库^[2]实现快速迁移。

引用链接

[1] Remove React.FC from Typescript template: https://github.com/facebook/create-react-app/pull/8177
[2] 库: https://github.com/gndelia/codemod-replace-react-fc-typescript

你好，我是恺哥，毕业于末流学校，毕业编程 0 基础，两年多前端摸爬滚打渐入佳境。公众号分享高质量文章，输出面试、前端进阶、职场等文章，有一个可能是最好的「前端学习社群」：点击了解恺哥的知识星球

点赞在看 无 bug ⬇️