Question

花了一些时间学习React后，我理解了创建组件的两个主要范例之间的区别

我的问题是我何时应该使用哪一个？为什么？一个人比另一个人有什么好处/权衡？

ES6 / 7课程：

import React, { Component } from 'react';

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

功能：

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

每当没有任何状态被该组件操纵时，我正在思考功能......但是这样吗？

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

Answer 1

你有正确的想法。如果您的组件不仅仅需要一些道具和渲染，那么请使用功能。您可以将它们视为纯函数，因为它们将始终呈现并表现相同，给定相同的道具。此外，他们不关心生命周期方法或有自己的内部状态。

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

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

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

Answer 2

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

组件需要维护状态
组件重新渲染太多，您需要通过shouldComponentUpdate
您需要container component

更新

现在有一个名为PureComponent的React类，您可以扩展（而不是Component），它实现了自己的shouldComponentUpdate，为您处理浅道具比较。 Read more

Answer 3

2019年3月更新

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

2019年2月更新：

随着React hooks的引入，似乎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

带钩子的功能组件可以almost类组件可以做的所有事情，而不需要上面提到的任何缺点。

我建议您尽快使用它们。

原始答案

功能组件不比基于类的组件更轻量级，＆＃34;它们完全像类一样执行。＆＃34; - https://github.com/facebook/react/issues/5677

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

＆＃34;等同于React的观点。＆＃34; - https://reactjs.org/docs/components-and-props.html#stateless-functions

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

将来（引用上述链接）＆＃34;我们[React]可能会添加此类优化。＆＃34;

如果您尝试通过消除不必要的渲染来提高性能，则这两种方法都会提供支持。功能组件为memo，类为PureComponent。

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

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

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

Answer 4

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

基于类的组件

状态
生命周期方法
使用React.PureComponent进行记忆

功能组件：

状态（useState，useReducer个钩子）
生命周期方法（通过useEffect，useLayoutEffect挂钩）

memo

记忆

为什么我更喜欢功能组件

React提供useEffect挂钩，这是一种结合componentDidMount，componentDidUpdate和componentWillUnmount生命周期方法的非常清晰简洁的方法
使用钩子，您可以提取易于在各组件之间共享和可测试
了解范围的困惑

对motivation为何使用挂钩（即功能组件）进行反应

Answer 5

使用功能更容易使用表单，因为您可以重复使用表单输入字段，并且可以使用React显示条件将它们分开。

类是不可分解或重用的一大组件。它们更适合于功能繁重的组件，例如在弹出式模块中执行算法的组件等。

最佳实践是功能组件的可重用性，然后使用小型功能组件组装完整的部分，例如-将表单输入字段导入到React表单的文件中。

另一种最佳实践是在执行此操作的过程中不要嵌套组件。

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

5 个答案:

更新