带有钩子的 React 函数组件与类组件 [英] React Function Components with hooks vs Class Components

问题描述

随着 React 中 hooks 的引入，现在的主要困惑是何时使用带有钩子和类组件的函数组件，因为在钩子的帮助下，即使在函数组件中也可以获得state和部分生命周期钩子.所以，我有以下问题

With the introduction of hooks in React, the main confusion now is when to use function components with hooks and class components because with the help of hooks one can get state and partial lifecycle hooks even in function components. So, I have the following questions

• 钩子的真正优势是什么?
• 何时使用带有钩子的函数组件与类组件?

例如，带有钩子的函数组件不能像类组件那样在性能上有所帮助.他们不能跳过重新渲染，因为他们没有实现 shouldComponentUpdate.还有什么原因吗?

For example, function components with hooks can't help in perf as class components does. They can't skip re-renders as they don't have shouldComponentUpdate implemented. Is there anymore reasons?

提前致谢.

推荐答案

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

The idea behind introducing Hooks and other features like React.memo and React.lazy is to help reduce the code that one has to write and also aggregate similar actions together.

文档中几乎没有提到使用 Hooks 而不是类的真正好的理由

The docs mention few really good reason to make use of Hooks instead of classes

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

It’s hard to reuse stateful logic between components Generally when you use HOC or renderProps you have to restructure your App with multiple hierarchies when you try to see it in DevTools, Hooks avoid such scenarios and help in clearer code

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

Complex components become hard to understand Often with classes Mutually unrelated code often ends up together or related code tends to be split apart, it becomes more and more difficult to maintain. An example of such a case is event listeners, where you add listeners in componentDidMount and remove them in componentWillUnmount . Hooks let you combine these two

类会混淆人和机器 使用类时，您需要了解绑定和调用函数的上下文，而这往往会让人感到困惑.

Classes confuse both people and machines With classes you need to understand binding and the context in which functions are called, which often becomes confusion.

带有钩子的函数组件在作为类的性能方面无济于事组件.他们不能跳过重新渲染，因为他们没有实施了 shouldComponentUpdate.

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

函数组件可以通过使用 React.memo 以与 React.PureComponent 类似的方式记忆化，您可以传入一个比较器函数作为第二个React.memo 的参数，可让您实现自定义比较器

Function component can be memoized in a similar way as React.PureComponent with Classes by making use of React.memo and you can pass in a comparator function as the second argument to React.memo that lets you implement a custom comparator

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

The idea is to be able write the code that you can write using React class component using function component with the help of Hooks and other utilities. Hooks can cover all use cases for classes while providing more flexibility in extracting, testing, and reusing code.

由于 hooks 还没有完全发布，建议不要在关键组件上使用 hooks，从相对较小的组件开始，是的，你可以完全用函数组件替换类

Since hooks is not yet fully shipped, its advised to not use hooks for critical components and start with relatively small component, and yes you can completely replace classes with function components

然而，在 Suspense 用于数据获取之前，您仍然应该选择 Class 组件而不是带有钩子的函数组件的原因之一.使用 useEffect 钩子获取数据不如使用生命周期方法那么直观.

However one reason that you should still go for Class components over the function components with hooks until Suspense is out for data fetching. Data fetching with useEffect hooks isn't as intuitive as it is with lifecycle methods.

@DanAbramov 在他的一条推文中也提到，钩子旨在与 Suspense 一起使用，在 suspense 消失之前最好使用 Class

Also @DanAbramov in one of his tweets mentioned that hooks are designed to work with Suspense and until suspense is out it's better to use Class

这篇关于带有钩子的 React 函数组件与类组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！