React 16.7 - React.SFC现已被弃用。

Question

我过去通常这样声明无状态组件：

const example: React.SFC<IExample> = ({propsType}) => ();

尽管如此，SFC现在已经被弃用了。也许来自Dan Abramov的这条Twitter帖子可以解释原因。

既然SFC已经被弃用，我们现在应该使用什么呢？

- Jonas Praem

---

有趣的是，SFC已经被弃用了，但是StatelessComponent没有。不过正如@Doğancan Arabacı所说，应该使用FunctionComponent。 - Dan

Answer 1

你应该使用 React.FunctionComponent: 将 React 的 SFC 改名为 'FunctionalComponent'

这个 PR 将 React.SFC 和 React.StatelessComponent 重命名为 React.FunctionComponent，同时引入了旧名称的弃用别名。

所以你的示例会变成：

const example: React.FunctionComponent<IExample> = ({propsType}) => ();

或者

const example: React.FC<IExample> = ({propsType}) => ();

- Doğancan Arabacı

Answer 2

我认为现在已经不再适用于接受的答案了。

React.FunctionComponent 有一些缺点，正如 create-react-app 的人们所解释的那样。他们的理由相当令人信服，我已经完全停止使用 FC。

更好的替代方案：

const example = ({ propsType }: IExample): JSX.Element => ();

- panepeter

---

既是肯定也是否定。虽然您可能是正确的，但问题是关于React 16.7的。我不知道更改标题的准则，因为未来的迭代又再次发生了变化。 - Jonas Praem

我最近才开始使用React，所以可能会有所遗漏。但在我的理解中，“FunctionComponent”类型从一开始就存在缺陷。隐式的“children”不是较新版本的React的问题，或者说它们不是吗？ - panepeter

我非常认同链接的PR中所述的问题。泛型编程非常困难。据文档显示，这是在React 16.7时TypeScript支持的做事方式。请记住，这是在hooks（16.8）之前，因此只能在不需要状态、副作用或其他任何东西时使用SFC/ FC等。主要仅用于视觉组件。 - Jonas Praem