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

我认为只要没有状态可被该组件操纵，就可以正常工作，但就这样吗？

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

Answer 1

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

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

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

Answer 2

2019年3月更新

根据我最初的答复所述：

“反应函数和类之间有什么根本的区别吗？当然，在心智模型中有。”

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

2019年2月更新：

随着React钩子的引入，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-功能

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

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

如果您试图通过消除不必要的呈现来提升性能，两种方法都提供支持。

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

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

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

Answer 3

你的想法是对的。如果你的组件只需要一些道具和渲染，那么就使用functional。您可以将这些函数视为纯函数，因为在相同的道具下，它们的渲染和行为总是相同的。而且，他们不关心生命周期方法，也不关心自己的内部状态。

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

如果你的组件需要更多的功能，比如保持状态，使用类来代替。

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

编辑：在React钩子的引入之前，上述大部分都是正确的。

>

方法可以通过使用使用效果（fn, [])复制，其中fn是在重新渲染时运行的函数，并且[]是组件将重新渲染的对象数组，如果和仅当自上次渲染以来至少有一个值已更改时。因为没有，所以在第一次挂载时运行一次。

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和usemo钩子阻止重新定义函数。但是，请记住，这可能会使您的代码（从微观上）性能更差。

但老实说，我从未听说过重新定义功能会成为React应用程序的瓶颈。过早的优化是所有邪恶的根源——当它成为问题时，请担心