何时使用基于 ES6 类的 React 组件与功能性 ES6 React 组件？

Question

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

我的问题是我应该什么时候使用哪一个，为什么？一个比另一个有什么好处/权衡？

---

ES6 类：

import React, { Component } from 'react';

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

---

功能：

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

只要该组件没有状态可操作，我就会认为是函数式的，但是是这样吗？

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

Answer 1

旧答案：你的想法是对的。如果您的组件除了接收一些道具和渲染之外没有做更多的事情，请使用功能性。您可以将这些视为纯函数，因为在给定相同道具的情况下，它们将始终呈现和表现相同。此外，它们不关心生命周期方法或拥有自己的内部状态。

因为它们是轻量级的，所以将这些简单的组件写成函数式组件是相当标准的。

如果您的组件需要更多功能，例如保持状态，请改用类。

更多信息：https://facebook.github.io/react/docs/reusable-components.html#es6-classes

---

新答案：在引入 React Hooks 之前，上述大部分内容都是正确的。

• componentDidUpdate 可以用useEffect(fn) 复制，其中fn 是在重新渲染时运行的函数。

• componentDidMount 方法可以用useEffect(fn, []) 复制，其中fn 是在重新渲染时运行的函数，[] 是组件将为其重新渲染的对象数组，当且仅当至少一个自上次渲染以来已更改值。由于没有，useEffect() 在第一次挂载时运行一次。

• state 可以用useState() 复制，其返回值可以解构为状态的引用和可以设置状态的函数（即const [state, setState] = useState(initState)）。一个例子可能会更清楚地解释这一点：

const Counter = () => {
  const [count, setCount] = useState(0)

  const increment = () => { 
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
    </div>
  )
}

default export Counter

顺便说一句，我听到很多人讨论出于性能原因不使用功能组件，特别是

“在功能组件中每次渲染都重新定义事件处理函数”

虽然如此，但请考虑您的组件是否真的以值得关注的速度或体积渲染。

如果是，您可以使用 useCallback 和 useMemo 挂钩来防止重新定义函数。但是，请记住，这可能会使您的代码（微观上）worse in performance。

但老实说，我从未听说过重新定义函数是 React 应用程序的瓶颈。过早的优化是万恶之源——当它成为问题时要担心这一点

Answer 2

从 React 17 开始，无状态功能组件这一术语具有误导性，应该避免使用（React.SFC deprecated、Dan Abramov on React.SFC），它们可以有状态，也可以有钩子（充当生命周期方法），它们与类组件或多或少重叠

基于类的组件

• 状态
• 生命周期方法
• 使用React.PureComponent 进行记忆

功能组件：

• 状态（useState，useReducer 钩子）
• 生命周期方法（通过useEffect、useLayoutEffect 挂钩）
• 通过memo HOC 进行记忆

为什么我更喜欢功能组件

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

反应 motivation 为什么使用钩子（即功能组件）。

Answer 3

2019 年 3 月更新

基于我原来的回答中所说的：

“React 函数和类之间有什么根本区别吗？当然有——在心智模型中。”

https://overreacted.io/how-are-function-components-different-from-classes/

2019 年 2 月更新：

随着 React hooks 的引入，React 团队似乎希望我们尽可能使用函数式组件（这更好地遵循 JavaScript 的函数式本质）。

他们的动机：

1.) It’s hard to reuse stateful logic between components
2.) Complex components become hard to understand
3.) Classes confuse both people and machines

带有钩子的功能组件可以做almost 类组件可以做的所有事情，而没有上面提到的任何缺点。

我建议您尽快使用它们。

原答案

功能组件并不比基于类的组件更轻量级，“它们完全像类一样执行。” - https://github.com/facebook/react/issues/5677#issuecomment-241190513

上面的链接有点过时了，但是 React 16.7.0 的文档说 函数和类组件：

“从 React 的角度来看是等价的。” - https://reactjs.org/docs/components-and-props.html#stateless-functions

除了语法之外，函数式组件和只实现渲染方法的类组件本质上没有区别。

将来（引用上面的链接）“我们 [React] 可能会添加此类优化。”

如果您想通过消除不必要的渲染来提高性能，这两种方法都可以提供支持。 memo 用于功能组件，PureComponent 用于类。

-https://reactjs.org/docs/react-api.html#reactmemo

-https://reactjs.org/docs/react-api.html#reactpurecomponent

这真的取决于你。如果您想要更少的样板，请使用功能。如果您喜欢函数式编程并且不喜欢类，请使用函数式编程。如果您希望代码库中所有组件之间保持一致，请使用类。如果您厌倦了在需要 state 之类的东西时将基于函数的组件重构为基于类的组件，请使用类。

Answer 4

使用函数式表单更容易，因为您可以重复使用表单输入字段，并且可以使用 React 显示条件将它们分开。

类是一个不能分解或重用的重要组件。它们更适合功能繁重的组件，例如在弹出模块中执行算法的组件或其他东西。

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

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

Answer 5

尽可能始终尝试使用无状态函数（功能组件）。在某些情况下，您需要使用常规的 React 类：

• 组件需要维护状态
• 组件重新渲染过多，您需要通过shouldComponentUpdate 进行控制
• 你需要一个container component

更新

现在有一个名为 PureComponent 的 React 类，您可以扩展它（而不是 Component），它实现了自己的 shouldComponentUpdate，为您处理浅层道具比较。 Read more