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

在花了一些时间学习React之后，我理解了创建组件的两种主要模式之间的差异

我的问题是什么时候我应该使用哪一个，为什么？一种方法与另一种方法相比有哪些好处/利弊

---

ES6课程：

import React, { Component } from 'react';

export class MyComponent extends Component {
  render() {
    return (
      <div></div>
    );
  }
}

import React，{Component}来自'React'；
导出类MyComponent扩展组件{
render（）{
返回(
);
}
}

---

功能性：

const MyComponent = (props) => {
    return (
      <div></div>
    );
}

const MyComponent=（道具）=>{
返回(
);
}

我认为只要没有状态可以被那个组件操纵，它就是功能性的，但这是真的吗

---

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

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

• 组件需要维护状态
• 组件重新渲染过多，您需要通过

  shouldComponentUpdate

• 你需要一个

更新

---

现在有一个名为

PureComponent

的React类，您可以扩展它（而不是

Component

），它实现自己的

shouldComponentUpdate

，为您提供浅层的道具比较

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

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

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

更多信息：

---

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

• componentdiddupdate

  可以通过

  useffect（fn）

  进行复制，其中

  fn

  是重新提交时运行的函数

• componentDidMount

  方法可以通过

  useffect（fn，[]）

  进行复制，其中

  fn

  是重新渲染时运行的函数，

  []

  是组件将重新渲染的对象数组，如果且仅当自上次渲染以来至少有一个对象的值发生了更改。由于没有，所以在第一次装载时，

  useffect（）

  运行一次

• state

  可以使用

  useState（）

  进行复制，其返回值可以分解为状态引用和可以设置状态的函数（即

  const[state，setState]=useState（initState）

  ）。举个例子可以更清楚地解释这一点：

const计数器=（）=>{
const[count，setCount]=useState（0）
常量增量=（）=>{
设置计数（计数+1）；
}
返回(
计数：{Count}

+
)
}
默认导出计数器

作为一个小插曲，我听到很多人讨论了出于性能原因而不使用功能组件，特别是

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

虽然是真的，但请考虑你的组件是否真的以这样的速度或体积渲染，这是值得关注的。

如果是，您可以使用

useCallback

和

usemo

钩子阻止重新定义函数。但是，请记住，这可能会使您的代码（从微观角度）失效

---

但老实说，我从来没有听说过重新定义功能是React应用程序的瓶颈。过早的优化是万恶之源——当它成为一个问题时，请为此担忧

2019年3月更新

根据我最初的答复所述：

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

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

带有钩子的功能组件可以完成类组件所能做的一切，而不需要上面提到的任何回退

我建议您尽快使用它们

原始答案

功能组件并不比基于类的组件更轻量级，“它们的性能与类完全相同。”

上面的链接有点过时，但是React 16.7.0的文档说 功能和类组件：

“从React的角度来看，是等效的。”-

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

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

如果您试图通过消除不必要的渲染来提高性能，这两种方法都提供了支持<代码>备忘录用于功能组件，而

PureComponent

用于类

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

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

---

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

状态的东西时厌倦了从功能组件重构到基于类的组件，请使用类。
从React 17开始，术语无状态功能组件具有误导性，应该避免使用，因为它们不再是无状态的（，），
1.) It’s hard to reuse stateful logic between components
2.) Complex components become hard to understand
3.) Classes confuse both people and machines