javascript - 带钩子(Hook)的 React 函数组件与类组件

Question

随着hooks的介绍在 React 中，现在主要的困惑是何时将函数组件与钩子(Hook)和类组件一起使用，因为在钩子(Hook)的帮助下，即使在函数组件中也可以获得状态和部分生命周期钩子(Hook)。所以，我有以下问题

• Hooks 的真正优势是什么？
• 何时使用带有钩子(Hook)的函数组件和类组件？

例如，带有钩子(Hook)的函数组件无法像类组件那样帮助提高性能。他们无法跳过重新渲染，因为他们没有实现 shouldComponentUpdate 。还有什么理由吗？

Answer 1

引入 Hooks 和其他功能(例如 React.memo 和 React.lazy)背后的想法是帮助减少必须编写的代码编写类似的操作并将其聚合在一起。

文档提到了一些使用 Hooks 而不是类的真正充分的理由

很难在组件之间重用有状态逻辑通常，当您使用 HOC 或 renderProps 时，当您尝试在 DevTools 中查看它时，您必须使用多个层次结构来重构您的应用程序，Hooks 可以避免这种情况并帮助更清晰的代码

复杂的组件变得难以理解 通常，对于类来说，相互不相关的代码通常最终会组合在一起，或者相关的代码往往会被分开，变得越来越难以维护。这种情况的一个示例是事件监听器，您可以在 componentDidMount 中添加监听器，并在 componentWillUnmount 中删除它们。 Hooks 让你将这两者结合起来

类会让人和机器感到困惑对于类，您需要了解绑定(bind)以及调用函数的上下文，这通常会造成困惑。

function components with hooks can't help in perf as classcomponents does. They can't skip re-renders as they don't haveshouldComponentUpdate implemented.

函数组件可以通过使用 React.memo 以与带有类的 React.PureComponent 类似的方式进行内存，并且您可以传入一个比较器函数作为第二个函数React.memo 的参数，可让您实现自定义比较器

<小时/>

这个想法是能够在 Hooks 和其他实用程序的帮助下使用函数组件编写可以使用 React 类组件编写的代码。 Hook 可以涵盖类的所有用例，同时在提取、测试和重用代码方面提供更大的灵 active 。

由于 hooks 尚未完全发布，建议不要对关键组件使用 hooks，并从相对较小的组件开始，是的，您可以完全用函数组件替换类

<小时/>

但是，在 Suspense 不再用于数据获取之前，您仍然应该选择类组件而不是带有钩子(Hook)的函数组件，这是一个原因。使用 useEffect Hook 获取数据并不像使用生命周期方法那样直观。

@DanAbramov 在他的一条推文中还提到，hooks 旨在与 Suspense 配合使用，在 Suspense 消失之前，最好使用 Class