在花了一些时间学习 React 之后，我理解了创建组件的两种主要范式之间的区别。
我的问题是我什么时候应该使用哪一个，为什么？一个相对于另一个的好处/权衡是什么？
ES6 类：
import React, { Component } from 'react';
export class MyComponent extends Component {
render() {
return (
<div></div>
);
}
}
功能：
const MyComponent = (props) => {
return (
<div></div>
);
}
每当该组件没有要操纵的状态时，我都在考虑功能性，但就是这样吗？
我猜如果我使用任何生命周期方法，最好使用基于类的组件。
你有正确的想法。如果你的组件除了接收一些 props 和渲染之外，没有做更多的事情，那就去使用函数式的。您可以将它们视为纯函数，因为在给定相同的 props 的情况下，它们将始终呈现相同的行为。此外，他们不关心生命周期方法或拥有自己的内部状态。
因为它们是轻量级的，所以将这些简单的组件编写为功能组件是非常标准的。
如果您的组件需要更多功能，例如保持状态，请改用类。
更多信息：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钩子重新定义函数。但是，请记住，这可能会使您的代码（微观上）性能更差。
但老实说，我从未听说过重新定义函数是 React 应用程序的瓶颈。过早的优化是万恶之源——当它出现问题时要担心
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
带有钩子的函数式组件几乎可以做类组件可以做的所有事情，而没有上面提到的任何缺点。
我建议您尽快使用它们。
原答案
功能组件并不比基于类的组件更轻量级，“它们与类完全一样”。- 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，请使用类。
从 React 17 开始，无状态功能组件这个术语具有误导性，应该避免（React.SFC 已弃用，Dan Abramov 在 React.SFC 上），它们可以有状态，也可以有钩子（充当生命周期方法），它们或多或少地与类组件重叠
基于类的组件
功能组件：
为什么我更喜欢函数式组件
componentDidMount,componentDidUpdate和componentWillUnmount生命周期方法react动机为什么使用钩子（即功能组件）。
使用函数式表单更容易，因为您可以重用表单输入字段，并且可以使用 React 显示条件将它们分开。
类是不可分解或重用的一大组件。它们更适合功能丰富的组件，例如在弹出module或其他东西中执行算法的组件。
最佳实践是功能组件的可重用性，然后使用小的功能组件来组装完整的部分，例如将表单输入字段导入到 React 表单的文件中。
另一个最佳实践是在执行此操作的过程中不要嵌套组件。