我应该在 React 中使用什么类型的组件：功能组件还是 class 基础组件？

Question

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

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

Answer 1

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

Answer 2

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

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

如果您正在编写新代码，可能会专注于编写函数组件。但是如果你正在申请工作，现有的代码库很有可能同时具有 class 和函数组件。您将需要对两者都感到满意，并且能够将一个转化为另一个。

Answer 3

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

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

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

Answer 4

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

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

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

Answer 5

功能组件和class组件.

有一些区别

功能组件：

在 React 中声明组件的最简单方法。你只需要声明一个 returns 和 jsx 的函数。例子:

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

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

完成大部分功能

componentDidUpdate => useEffect(fn)

componentDidMount => useEffect(fn, [])

state => useState()

Class分量：

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

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

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

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

Class 组件 VS 功能组件

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

我应该在 React 中使用什么类型的组件：功能组件还是 class 基础组件？

What type of components should I use in React: functional components or class base components?

reactjs

react-native

react-component

react-functional-component

功能组件：

Class分量：

Class 组件 VS 功能组件