我应该在 React 中使用什么类型的组件：函数式组件还是类基组件？

Question

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

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

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

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

具有新 Hook 的功能组件也取代了生命周期方法

• 更容易管理
• 更大的兼容性，尤其是打字稿
• 更少和更干净的代码

Answer 5

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

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

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