使用钩子对函数组件和类组件进行反应 [英] React Function Components with hooks vs Class Components
问题描述
随着React中钩子的引入，现在的主要困惑是何时使用具有钩子和类组件的函数组件，因为借助钩子，即使在函数组件中也可以获取state和部分lifecycle hooks.所以，我有以下问题
- 钩子的真正优点是什么?
- 何时使用带有钩子的函数组件与类组件一起使用?
例如，带有钩子的功能组件不能像类组件那样帮助性能.由于没有实现shouldComponentUpdate，因此他们不能跳过重新渲染.还有其他原因吗?
谢谢.
引入Hooks以及React.memo和React.lazy之类的其他功能的想法是帮助减少必须编写的代码，并汇总类似的代码.一起行动.
文档中提到了使用钩子代替类的真正好理由
很难在组件之间重用状态逻辑.通常，当您使用HOC或renderProps时，当您尝试在DevTools中查看应用程序时，必须使用多个层次结构重新构建应用程序，Hooks避免了这种情况并提供了帮助代码更清晰
复杂的组件变得难以理解经常使用类互不相关的代码通常最终会在一起，或者相关的代码倾向于分离开来，因此变得越来越难以维护.这种情况的一个示例是事件侦听器，您可以在componentDidMount中添加侦听器，然后在componentWillUnmount中将其删除.挂钩使您可以将这两者结合在一起
类会使人和机器混淆.使用类，您需要了解绑定和调用函数的上下文，这常常会造成混乱.
带有钩子的功能组件无法帮助实现类的性能 组件呢.他们无法跳过重新渲染，因为他们没有 应该实现了ComponentComponentUpdate.
通过使用React.memo，可以使用与类类似的方式对
Function组件进行记忆，并且可以将比较器函数作为React.memo的第二个参数传入，从而可以实现自定义比较器
这个想法是能够在Hooks和其他实用程序的帮助下使用功能组件编写可以使用React类组件编写的代码.钩子可以覆盖类的所有用例，同时在提取，测试和重用代码方面提供更大的灵活性.
由于钩子尚未完全交付，因此建议不要对关键组件使用钩子，而应从相对较小的组件开始，是的，您可以将类完全替换为功能组件
但是，您仍然应该使用带钩子的功能组件而不是Class组件，直到Suspense可以用于数据提取为止.使用useEffect挂钩获取数据并不像使用生命周期方法那样直观.
@DanAbramov在他的一条推文中也提到，挂钩旨在与Suspense配合使用，直到悬念消失为止，最好使用Class
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
- 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 shouldComponentUpdate implemented. Is there anymore reasons?
Thanks in advance.
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.
The docs mention few really good reason to make use of Hooks instead of classes
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
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.
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 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
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.
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.
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
这篇关于使用钩子对函数组件和类组件进行反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
