Question

让我感到困惑的是，功能组件和基于类的组件现在都可以使用State和Props了，但是它们的实现方式不同。我更喜欢基于类的组件，因为我是有角度的开发人员，并且我发现使用这些类型的组件更加舒适。但是我进行了搜索，许多专家表示，最好尽可能使用功能组件。

我想知道当有人申请对开发人员的职位做出反应时，这对科技公司来说真的很重要吗？他们会看这些东西吗？由于它们在实现方式上有很大不同...

Answer 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或代表性组件时。如果您的组件不需要复杂的状态，复杂的逻辑，method component最适合您。

Answer 2

功能组件是新标准。保持它们的轻巧性和可读性比较容易。在高质量的代码中，任何组件都不需要太多的逻辑，以至于超过30至50行的顶部使事情简短明了，因此请记住，一个类的组件又大又笨拙

Answer 3

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

话虽如此，功能组件是新代码的更好选择。他们还支持React Hooks，它可以替代基于类的生命周期方法。

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

Answer 4

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

带有新钩子（也可以替换生命周期方法）的

功能组件是

易于管理
更高的兼容性，尤其是与打字稿
更少且更干净的代码

Answer 5

如今，大多数开发人员都转向功能组件而不是类组件，因为可能有很多原因，但是一些最有利的方面是

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

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

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

5 个答案:

方法组件：

类组件：

类组件VS方法组件