我应该在 React 中使用哪种类型的组件：功能组件或类基础组件？

Posted 2023-03-16

【中文标题】我应该在 React 中使用哪种类型的组件：功能组件或类基础组件？

【英文标题】：What type of components should I use in React: functional components or class base components?

【发布时间】：2020-05-07 12:35:05

【问题描述】：

让我感到困惑的是，功能组件和基于类的组件现在都可以使用State 和Props，但在不同的实现中。我更喜欢基于类的组件，因为我是 Angular 开发人员，而且我发现使用这些类型的组件更舒服。但是我搜索了这个，很多专家都说最好尽可能地使用功能组件。

我想知道当有人申请 React 开发人员职位时，这对科技公司是否真的很重要。他们会看这些东西吗？由于它们在实现上存在很大差异...

【参考方案1】：

函数式组件和类组件有一些区别。

功能组件：

在 React 中声明组件的最简单方法。 您只需要声明一个返回jsx 的函数。 示例：

const MessageComponent = ( name ) =>  return <h1>Hi name</h1> 

除了引入 React Hooks 后，您还可以使用 功能组件

完成大部分功能

componentDidUpdate => useEffect(fn)

componentDidMount => useEffect(fn, [])

state => useState()

类组件：

组件的健壮版本。使用类组件，您可以做更多事情。 Props 将默认在类上下文this.props 中。 您可以为组件使用状态、局部变量。 您可以添加许多共享相同状态的类的方法。

export default class MessageComponent  extends Component 
  state = 
    message: 'default message'
  

  renderMessage = () => 
    return (
      <h1>
        Hi this.props.name
      </h1>
    )
  

  render() 
    return (
      <div>
        this.renderMessage()
      </div>
    )
  

类组件VS功能组件

不使用类组件的主要原因是您只需要一个简单的组件，例如button、card 或代表性组件。如果您的组件不需要复杂的状态、复杂的逻辑，functional component 最适合您。

【讨论】：

第一次看到“方法组件”。这不是叫“功能组件”吗？

@pietro909 功能或方法，当然我的意思是功能组件，我已经将它更新为功能而不是方法

【参考方案2】：

功能组件是新标准。保持它们重量轻且可读性更容易。在高质量的代码中，任何组件都不应该需要如此多的逻辑，以至于超过 30 到 50 行，这使事情变得简洁明了，考虑到这一点，类组件只是又大又笨重

【参考方案3】：

类组件最初是使用的，并且仍然受 React 支持。根据 React 开发人员的说法，没有停止支持他们的计划。在现有的代码库中，没有理由花费资源将类组件转换为函数组件。

话虽如此，函数组件是新代码的更好选择。它们还支持 React Hooks，这是基于类的生命周期方法的替代品。

如果您正在编写新代码，则可能专注于编写函数组件。但是，如果您正在申请工作，现有代码库很有可能同时具有类和函数组件。您需要对两者都感到满意，并且能够将其中一种翻译成另一种。

【参考方案4】：

现在，组织倾向于使用最新的技术，并雇用与新事物产生共鸣的人。

功能组件带有新的 Hooks，也替换了生命周期方法是

更易于管理 更好的兼容性，尤其是与 typescript 的兼容性 代码更少，代码更简洁

【参考方案5】：

如今，大多数开发人员正在转向功能组件而不是类组件，因为可能有很多原因，但其中一些最有益的点是

与基于类的组件相比，它们更具可读性。 易于测试和调试，因为它需要更少的代码。 根据指南，它可能会提高性能。

我想您应该将新组件编写为功能组件。因为现在公司将为旧代码管理基于类的组件，但他们将继续使用功能组件。因此，您应该了解这两种编码约定。