javascript 带有钩子的 React 函数组件与类组件

React Function Components with hooks vs Class Components

提问by Pranesh Ravi

With the introduction of hooksin 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 stateand partial lifecycle hookseven in function components. So, I have the following questions

随着React中钩子的引入，现在的主要困惑是什么时候使用带有钩子和类组件的函数组件，因为在钩子的帮助下state，lifecycle hooks即使在函数组件中也可以获取和部分。所以，我有以下问题

• What is the real advantages of hooks?
• When to use function components with hooks vs Class components?

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

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 shouldComponentUpdateimplemented. Is there anymore reasons?

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

Thanks in advance.

提前致谢。

采纳答案by Shubham Khatri

The idea behind introducing Hooksand other features like React.memoand React.lazyis to help reduce the code that one has to write and also aggregate similar actions together.

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

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

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

It's hard to reuse stateful logic between componentsGenerally 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

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

Complex components become hard to understandOften 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 componentDidMountand remove them in componentWillUnmount. Hooks let you combine these two

复杂的组件变得难以理解经常与类 互不相关的代码往往最终在一起或相关的代码趋于分裂，变得越来越难以维护。此类情况的一个示例是事件侦听器，您可以在其中添加侦听器componentDidMount并在componentWillUnmount. Hooks 让你把这两者结合起来

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

类混淆了人和机器使用类，您需要了解绑定和调用函数的上下文，这通常会导致混淆。

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.

带有钩子的函数组件无法像类组件那样提高性能。他们不能跳过重新渲染，因为他们没有实现 shouldComponentUpdate。

Function component can be memoized in a similar way as React.PureComponentwith Classes by making use of React.memoand you can pass in a comparator function as the second argument to React.memothat lets you implement a custom comparator

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

---

---

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

我们的想法是能够编写您可以使用 React 类组件在函数组件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

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

---

---

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.

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

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

@DanAbramov 在他的一条推文中还提到，钩子旨在与 Suspense 一起使用，并且在 suspense 结束之前最好使用 Class

回答by sam

Hooks greatly reduce the amount of code you need to write and increase its readability.

Hook 大大减少了您需要编写的代码量并提高了其可读性。

It is worth noting though that there are hidden processes going on behind (Just like component did mount etc.) that mean if you don't understand what is going on it can be difficult to troubleshoot. It is best to experiment with them and read through the docs fully before implementing on a live project.

值得注意的是，背后有隐藏的进程（就像组件确实挂载等），这意味着如果您不了解正在发生的事情，则可能很难进行故障排除。在实际项目中实施之前，最好对它们进行试验并通读文档。

Also there is still limited support/documentation for testing hooks compared to classes. https://dev.to/theactualgivens/testing-react-hook-state-changes-2oga

此外，与类相比，测试钩子的支持/文档​​仍然有限。 https://dev.to/theactualgivens/testing-react-hook-state-changes-2oga

回答by Ehsan sarshar

The best reason for using Hooks is : clean code and better development experience. Because sometimes complex components make code hard to read. So we can use hooks instead. But it doesn't mean that react will replace classes. React will continue supporting both. For more info you can refer to documentation https://reactjs.org/docs/hooks-intro.html

使用 Hooks 的最佳理由是：干净的代码和更好的开发体验。因为有时复杂的组件会使代码难以阅读。所以我们可以使用钩子代替。但这并不意味着 React 会取代类。React 将继续支持两者。有关更多信息，您可以参考文档https://reactjs.org/docs/hooks-intro.html