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