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

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
• 你需要一个容器组件

UPDATE

现在有一个名为React的类PureComponent,你可以扩展(而不是Component)实现自己的类shouldComponentUpdate,为你处理浅道具比较.阅读更多

Answer 3

功能组件不比基于类的组件更轻量级,"它们与类完全相同." - https://github.com/facebook/react/issues/5677

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

"与React的观点相同." - https://reactjs.org/docs/components-and-props.html#stateless-functions

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

在将来(引用上面的链接)"我们[React]可能会添加这样的优化."

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

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

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

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

2019年1月更新

随着React钩子的引入,似乎React团队希望我们尽可能使用功能组件(这更好地遵循JavaScript的功能性质).这有助于您编写更简单的组件,重用有状态逻辑,并摆脱类周围的所有icky(如memo).

Answer 4

从 React 17 开始，无状态功能组件这个术语具有误导性，应该避免（React.SFC 已弃用，Dan Abramov 在 React.SFC 上），它们可以有状态，也可以有钩子（充当生命周期方法），它们或多或少地与类组件重叠

基于类的组件

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

功能组件：

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

为什么我更喜欢函数式组件

• React 提供了 useEffect 钩子，这是一种非常清晰简洁的方式来组合componentDidMount,componentDidUpdate和componentWillUnmount生命周期方法
• 使用钩子，您可以提取可以在组件之间轻松共享和可测试的逻辑
• 减少对范围界定的混淆

反应动机为什么使用钩子（即功能组件）。