何时使用基于 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>
    );
}

我在想只要没有状态可以被该组件操纵就可以发挥作用，但是是这样吗？

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

原文由 omarjmh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

• componentDidMount methods can be replicated with useEffect(fn, []) , where fn is the function to run upon rerendering, and [] is an array of objects for组件将重新渲染，当且仅当自上次渲染以来至少有一个值发生了变化。由于没有， 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 钩子来防止重新定义函数。但是，请记住，这可能会使您的代码（微观上） 性能变差。

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

---

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

因为它们是轻量级的，所以将这些简单的组件编写为功能组件是非常标准的。

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

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

原文由 Jeff Cousins 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

2019 年 3 月更新

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

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

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

2019 年 2 月更新：

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

他们的动机：

1. 很难在组件之间重用有状态逻辑。
2. 复杂的组件变得难以理解。
3. 类混淆了人和机器。

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

我建议您尽快使用它们。

原始答案

函数式组件并不比基于类的组件更轻量，“它们的表现与类完全一样”。 - https://github.com/facebook/react/issues/5677#issuecomment-241190513

上面的链接有点过时，但 React 16.7.0 的文档说功能和类组件：

从 React 的角度来看是等价的

https://reactjs.org/docs/components-and-props.html#stateless-functions

除了语法之外，功能组件和仅实现 render 方法的类组件之间基本上没有区别。

将来（引用上面的链接）：

我们 [React] 可能会添加这样的优化

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

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

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

这真的取决于你。如果您想要更少的样板文件，请使用功能。如果你喜欢函数式编程而不喜欢类，那就去函数式编程吧。如果您想要代码库中所有组件之间的一致性，请使用类。如果您厌倦了从功能组件重构为基于类的组件，而您需要诸如 state 类的东西，请使用类。

原文由 Galupuf 发布，翻译遵循 CC BY-SA 4.0 许可协议