随着React中钩子的引入，现在的主要困惑是什么时候使用带有钩子和类组件的函数组件，因为在钩子的帮助下state，lifecycle hooks即使在函数组件中也可以获取和部分。所以，我有以下问题
- 钩子的真正优势是什么？
- 何时使用带有钩子和类组件的函数组件？
例如，带有钩子的函数组件不能像类组件那样在性能上有所帮助。他们不能跳过重新渲染，因为他们没有shouldComponentUpdate实现。还有什么原因吗？
提前致谢。
带有钩子的 React 函数组件与类组件
IT技术
javascript
reactjs
react-hooks
2021-02-15 12:38:02
3个回答
引入Hooks和其他功能（例如React.memo和React.lazy）背后的想法是帮助减少必须编写的代码并将类似的操作聚合在一起。
文档几乎没有提到使用 Hooks 而不是类的真正好的理由
很难在组件之间重用有状态的逻辑通常，当您使用 HOC 或 renderProps 时，当您尝试在 DevTools 中查看它时，您必须使用多个层次结构重构您的应用程序，Hooks 避免了这种情况并有助于更清晰的代码
复杂的组件变得难以理解经常与类 互不相关的代码往往最终在一起或相关的代码趋于分裂，变得越来越难以维护。此类情况的一个示例是事件侦听器，您可以在其中添加侦听器componentDidMount并在componentWillUnmount. Hooks 让你把这两者结合起来
类混淆了人和机器使用类，您需要了解绑定和调用函数的上下文，这通常会导致混淆。
带有钩子的函数组件无法像类组件那样提高性能。他们不能跳过重新渲染，因为他们没有实现 shouldComponentUpdate。
函数组件可以React.PureComponent通过使用与类类似的方式进行记忆，React.memo并且您可以传入比较器函数作为第二个参数React.memo，让您实现自定义比较器
我们的想法是能够编写您可以使用 React 类组件在函数组件Hooks和其他实用程序的帮助下编写的代码。Hooks 可以覆盖类的所有用例，同时在提取、测试和重用代码方面提供更大的灵活性。
由于钩子还没有完全发布，建议不要对关键组件使用钩子，从相对较小的组件开始，是的，你可以用函数组件完全替换类
然而，在 Suspense 用于数据获取之前，您仍然应该选择 Class 组件而不是带有钩子的函数组件的原因之一。使用 useEffect 钩子获取数据不像使用生命周期方法那样直观。
@DanAbramov 在他的一条推文中还提到，钩子旨在与 Suspense 一起使用，并且在 suspense 消失之前最好使用 Class
官方听起来像是钩子将完全取代类？也许有一天，但想一想；hooks 已经存在 3 年（截至 2021 年 3 月），采用它们有利有弊（利大于弊......不要误会我的意思）
我自己在状态管理/类方面有更多的经验，经过大量研究和测试后，我发现我们需要非常了解类和钩子。Hooks 需要一小部分代码用于简单的组件，并且对于优化 HOCs 看起来非常好。与此同时，例如路由、容器组件和异步编程的类似乎更好。
我敢肯定还有更多的案例表明每种技术都更好，但我的观点是程序员需要非常了解钩子和类，特别是在处理具有 100,000 多行代码和数百万用户的项目时。在此处阅读更多信息：https : //stackoverflow.com/a/60134353/11239755
Hook 大大减少了您需要编写的代码量并提高了其可读性。
值得注意的是，背后有隐藏的进程（就像组件确实挂载等），这意味着如果您不了解正在发生的事情，则可能很难进行故障排除。在实际项目中实施之前，最好对它们进行试验并通读文档。
此外，与类相比，测试钩子的支持/文档仍然有限。 https://dev.to/theactualgivens/testing-react-hook-state-changes-2oga
更新 28/08/2020 使用带有自定义钩子的 react hooks 测试库进行测试 https://github.com/testing-library/react-hooks-testing-library