使用钩子和类组件来反应功能组件

Pra*_*avi 31 javascript reactjs react-hooks

随着React 中钩子的引入,现在的主要困惑是何时使用带钩子和类组件的功能组件,因为在钩子的帮助下state,lifecycle hooks即使在功能组件中也可以获得和部分.所以,我有以下问题

  • 钩子的真正优点是什么?
  • 何时使用带钩子和类组件的功能组件?

例如,带有钩子的功能组件无法像类组件那样帮助执行.他们无法跳过重新渲染,因为他们没有shouldComponentUpdate实现.还有原因吗?

提前致谢.

Shu*_*tri 27

后面介绍的想法Hooks和其他功能,如React.memoReact.lazy是帮助减少一个人必须聚合类似的行动写,也在一起的代码.

文档提到使用Hooks而不是类的几个非常好的理由

在组件之间重用有状态逻辑很难通常当您使用HOC或renderProp时,当您尝试在DevTools中看到它时,您必须使用多个层次结构重构您的应用程序,Hooks避免这样的场景并帮助更清晰的代码

复杂的组件变得难以理解通常使用类互不相关的代码通常会一起结束,或者相关的代码往往被拆分,维护变得越来越困难.这种情况的一个示例是事件侦听器,您可以在其中添加侦听器componentDidMount并将其删除componentWillUnmount.钩子让你结合这两个

类使人和机器混淆使用类需要理解绑定和调用函数的上下文,这通常会变得混乱.

带有钩子的功能组件无法像类组件那样帮助.他们无法跳过重新渲染,因为他们没有实现shouldComponentUpdate.

函数组件可以通过使用类似于React.PureComponentClasses的方式进行存储,React.memo并且您可以传入比较器函数作为第二个参数,React.memo以便您实现自定义比较器


我们的想法是能够在使用功能组件Hooks和其他实用程序的帮助下编写可以使用React类组件编写的代码.钩子可以涵盖类的所有用例,同时在提取,测试和重用代码方面提供更大的灵活性.

由于挂钩尚未完全发货,建议不要使用关键组件的挂钩,并从相对较小的组件开始,是的,您可以完全用功能组件替换类


然而,有一个原因是你仍然应该使用钩子在功能组件上使用Class组件,直到Suspense用于数据获取.使用useEffect钩子进行数据获取并不像生命周期方法那样直观.

另外@DanAbramov在他的一条推文中提到钩子被设计成与Suspense一起工作,直到悬念出来更好地使用Class


sam*_*sam 7

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


小智 7

官方听起来钩子将完全取代类?也许有一天,但想一想;Hooks 已经存在了 3 年(截至 2021 年 3 月),采用它们有利有弊(利大于弊......不要误会我的意思)

我自己在状态管理/类方面有更多的经验,经过大量研究和测试,我发现我们需要很好地了解类和钩子。Hooks 只需要简单组件的一小部分代码,并且对于优化 HOC 似乎非常有效。同时,类在路由、容器组件和异步编程等方面似乎更好。

我确信每种技术都更好的情况还有很多,但我的观点是,程序员需要非常了解钩子和类,特别是在处理具有 100,000 多行代码和数百万用户的项目时。在这里阅读更多信息:/sf/answers/4209404741/