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

你有正确的主意。如果您的组件只做一些道具和渲染，那么功能就可以了。您可以将它们视为纯函数，因为在给定相同的道具的情况下，它们始终将呈现并表现相同的行为。而且，他们不在乎生命周期方法或拥有自己的内部状态。

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

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

编辑 ：以上大部分是正确的，直到引入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

关于何时在功能组件上使用类的建议，Facebook正式建议尽可能使用功能组件。顺便说一句，我听到很多人讨论出于性能原因不使用功能组件，特别是

“事件处理功能在功能组件中按渲染重新定义”

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

如果是这样，则可以防止使用

useCallback

useMemo

但老实说，我从未听说过重新定义功能是React应用程序的瓶颈。过早的优化是万恶之源-遇到问题时请担心