何时使用基于 ES6 类的 React 组件与函数式 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 Hooks 之前，下面的大部分内容都是正确的。

• componentDidUpdate可以复制useEffect(fn), where fn是在重新渲染时运行的函数。

• componentDidMount方法可以复制useEffect(fn, []), where 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 and useMemo钩子。但是，请记住，这可能会使您的代码（微观上）性能较差 https://kentcdodds.com/blog/usememo-and-usecallback.

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

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

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

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

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