React Function Components with hooks vs Class Components [英] React Function Components with hooks vs Class Components
问题描述
随着在 React 中引入 hooks，现在主要的困惑是何时使用带有钩子和类组件的函数组件，因为在钩子的帮助下，即使在函数组件中也可以获得 state 和部分 lifecycle hooks.所以，我有以下问题
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.
Function 组件可以通过使用 React.memo 以类似于 React.PureComponent 与 Classes 的方式进行记忆，并且您可以传入一个比较器函数作为第二个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 类组件编写的代码.Hooks 可以涵盖类的所有用例，同时在提取、测试和重用代码方面提供更大的灵活性.
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 用于数据获取之前，您仍然应该使用类组件而不是带有钩子的函数组件，这是一个原因.使用 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 Function Components with hooks vs Class Components的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
