何时使用基于ES6类的React组件vs.功能性ES6 React组件?

在花了一些时间学习React之后，我明白了创建组件的两种主要范式之间的区别。

我的问题是什么时候应该使用哪个，为什么?其中一种与另一种相比有什么好处/权衡?

ES6签署:

import React, { Component } from 'react';

export class MyComponent extends Component {
  render() {
    return (
      <div></div>
    );
  }
}

功能:

const MyComponent = (props) => {
    return (
      <div></div>
    );
}

我认为函数是指没有状态可以被那个组件操纵的情况，但真的是这样吗?

我想，如果我使用任何生命周期方法，最好使用基于类的组件。

当前回答

基于类的组件提供了一种更加结构化和有组织的方式来定义和实现组件，并且它们提供了额外的特性和功能，例如使用本地状态和生命周期方法的能力。这可以使它们成为创建需要大量逻辑和功能的复杂组件的好选择。

另一方面，功能组件更简单，更容易使用，而且它们的性能更高，因为它们更轻量级。它们也更容易测试和调试，因为它们是纯函数，没有副作用。这使得它们成为创建不需要大量逻辑或状态管理的简单组件的好选择。

其他回答

只要可能，总是尝试使用无状态函数(功能组件)。在某些情况下，你需要使用一个常规的React类:

组件需要维护状态组件重新渲染过多，您需要通过shouldComponentUpdate来控制它您需要一个容器组件

更新

现在有一个名为PureComponent的React类，你可以扩展(而不是Component)，它实现了自己的shouldComponentUpdate，为你处理浅道具比较。阅读更多

在React 17中，术语无状态功能组件是误导性的，应该避免使用。SFC已弃用，Dan Abramov在React.SFC上)，它们可以有状态，也可以有钩子(充当生命周期方法)，它们或多或少与类组件重叠

基于类的组件

状态生命周期方法用React记忆。PureComponent

功能组件:

state (useState, useReducer钩子) 生命周期方法(通过useEffect, useLayoutEffect钩子) 通过备忘录HOC进行记忆

为什么我更喜欢功能性组件

React提供了useEffect钩子，这是一种非常清晰和简洁的方式来组合componentDidMount, componentDidUpdate和componentWillUnmount生命周期方法使用钩子，您可以提取可以在组件之间轻松共享和可测试的逻辑减少对范围的混淆

React动机为什么使用钩子(即功能组件)。

使用functional表单更简单，因为可以重用表单输入字段，还可以使用React显示条件将它们分开。

类是一个不能分解或重用的大组件。它们更适合于功能丰富的组件，比如在弹出式模块中执行算法的组件。

最佳实践是功能组件的可重用性，然后使用小的功能组件来组装完整的部分，例如，表单输入字段导入到React表单的文件中。

另一个最佳实践是在执行此操作的过程中不要嵌套组件。

我在生产中使用了大量的功能组件。我只在“错误边界”中使用过一次类组件，因为在功能组件中没有可选的“错误边界”。

我只使用了一次“类组件”。

推荐文章