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

我正在考虑什么时候只要该组件没有状态要操作就可以了，是吗？

我在猜测是否使用任何生命周期方法，最好是使用基于类的组件。

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

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

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

更多信息：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

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

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

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

如果是这样，则可以防止使用useCallback和useMemo挂钩重新定义功能。但是，请记住，这可能会使您的代码（微观上）的性能降低。

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

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

• 组件需要保持状态
• 组件重新渲染过多，您需要通过进行控制 shouldComponentUpdate
• 您需要一个容器组件

更新

现在有一个称为React的类PureComponent，您可以扩展（而不是Component）来实现它自己的方法shouldComponentUpdate，该方法可以为您比较浅道具。阅读更多

2019年3月更新

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

2019年2月更新：

随着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

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

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

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

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

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

这完全取决于您。如果您希望减少样板，请继续使用。如果您喜欢函数式编程并且不喜欢类，请使用函数式。如果要在代码库中的所有组件之间保持一致性，请使用类。如果您在需要诸如的东西时已经厌倦了从功能性组件重构为基于类的组件state，请使用类。

从React 16.8开始，术语无状态功能组件具有误导性，应避免使用它们，因为它们不再不再是无状态的（React.SFC不推荐使用，Dan Abramov on React.SFC），它们可以具有状态，可以具有钩子（充当钩子）生命周期方法），它们或多或少与类组件重叠

基于类的组件

• 州
• 生命周期方法
• 用React.PureComponent进行记忆

功能组件：

• 状态（useState，useReducer挂钩）
• 生命周期方法（通过useEffect，useLayoutEffect挂钩）
• 通过备忘录 HOC 进行备忘录

为什么我更喜欢功能组件

• 反应提供useEffect挂钩，是结合了非常清晰和简洁的方式componentDidMount，componentDidUpdate以及componentWillUnmount生命周期方法
• 使用钩子，您可以提取可以在组件之间轻松共享和测试的逻辑
• 减少范围界定上的混乱

反应动机为何使用挂钩（即功能组件）。