React - 偏好：函数组件与类组件[重复]

Posted 2023-02-19

【中文标题】React - 偏好：函数组件与类组件[重复]

【英文标题】：React - Preference: function component vs class component [duplicate]

【发布时间】：2020-09-03 16:10:34

【问题描述】：

类组件是否被废弃？

我看到在几个库中的示例将功能组件作为优先事项。

尤其是 React Navigation。

同样，React 本身与 Hooks 仅使它们可用于函数组件。

主要问题是：为什么功能组件的优先级如此之高？

【参考方案1】：

不，我认为类组件今天不会被抛弃。也许在未来。

它们不像功能组件那样轻量级，但我在社区中看到很多使用类组件的项目。

但是，我们有一些社区支持Functional Components 方法的原因：

类组件需要更多代码，但也会给您带来一些您稍后会看到的好处（Babel 转译的代码也会更大） 函数式组件只是一个普通的 javascript 函数，它接受 props 作为参数并返回一个 React 元素。 函数式组件更易于阅读和测试，因为它们是纯 JavaScript 函数（代码更少）。 React 团队 mentioned 在未来的 React 版本中可能会提升功能组件的性能

看到这个答案：https://***.com/a/49613435/4119452

更多信息：https://www.twilio.com/blog/react-choose-functional-components

【讨论】：

减 1 用于放置需要拥有 Medium 帐户才能获取信息的媒体链接。

@me_digvijay 我刚刚从媒体中删除了链接，并从另一个来源发布了一篇很棒的文章。感谢您的关注！

谢谢，让我收回自己

【参考方案2】：

现在，类组件和功能组件几乎相同。在函数式组件中之前没有引入 Hooks，为了等效于类组件，函数式组件获得了新的钩子，如 useState、useRef、useMemo，它们等效于 this.state、React.createRef 和 PureComponent。

此外，类组件上的componentDidUpdate可以用于功能组件上的useEffect。

更多详情请查看 Functional Components vs Class Components in React 和 React JS — Understanding Functional & Class Components

【参考方案3】：

Hooks-first 方法 [2020 年更新]

React 团队目前正在使用 Hooks-first 方法重新构建文档，这应该是所有新功能和应用程序的首选：

将来，类组件是否有可能被弃用？

类组件将在未来几年内出现——例如， Facebook 已经有数以万计的产品在生产。 但是，我们确实建议使用功能构建新应用程序 组件和 Hooks，这就是为什么我们希望这些文档放在前面和 中心。

https://github.com/reactjs/reactjs.org/issues/3308