使用钩子对功能组件与类组件进行反应

时间:2018-10-30 10:54:15

标签: javascript reactjs react-hooks

随着React中hooks的引入,现在的主要困惑是何时将功能组件与钩子和类组件一起使用,因为借助钩子,人们可以获得state和部分{{1} }甚至在功能组件中。所以,我有以下问题

  • 钩子的真正优点是什么?
  • 何时将带有钩子的功能组件与类组件一起使用?

例如,带有钩子的功能组件不能像类组件那样帮助性能。他们没有执行lifecycle hooks,因此无法跳过重新渲染。还有其他原因吗?

谢谢。

4 个答案:

答案 0 :(得分:18)

引入Hooks以及React.memoReact.lazy之类的其他功能的想法是帮助减少必须编写的代码并将相似的动作聚合在一起。

文档中提到了使用钩子代替类的一些很好的理由

很难在组件之间重用状态逻辑。通常,当您使用HOC或renderProps时,当您尝试在DevTools中查看应用时,必须使用多个层次结构重新构建应用,Hooks避免了这种情况并提供了帮助代码更清晰

复杂的组件变得难以理解经常使用类互不相关的代码通常最终会在一起,或者相关的代码倾向于分离开来,因此变得越来越难以维护。这种情况的一个示例是事件侦听器,您可以在componentDidMount中添加侦听器,然后在componentWillUnmount中将其删除。钩子让您结合这两个

类会使人和机器混淆。使用类时,您需要了解绑定和调用函数的上下文,这常常会造成混乱。

  

带有钩子的功能组件无法帮助实现类性能   组件呢。他们无法跳过重新渲染,因为他们没有   应该实现了ComponentComponentUpdate。

可以通过使用React.PureComponent以类似于React.memo的方式使用类来记忆功能组件,并且可以将比较器函数作为React.memo的第二个参数传递给您,实施自定义比较器


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

由于钩子尚未完全交付,因此建议不要对关键组件使用钩子,而应从相对较小的组件开始,是的,您可以使用功能组件完全替换类


但是,您仍然应该使用带钩子的功能组件来代替Class组件,直到Suspense用于数据提取为止。使用useEffect挂钩获取数据并不像使用生命周期方法那样直观。

@DanAbramov还在他的一条推文中提到,挂钩旨在与Suspense配合使用,直到可以使用suspense更好地使用Class

答案 1 :(得分:3)

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

我自己在状态管理/类方面有更多的经验,在做了大量研究和测试之后,我发现我们需要非常了解类和钩子。钩子需要一小部分简单组件的代码,似乎非常适合优化 HOC。与此同时,类似乎更适合路由、容器组件和异步编程。

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

答案 2 :(得分:0)

钩子大大减少了您需要编写的代码量,并提高了可读性。

值得注意的是,尽管后面有隐藏的进程(就像组件已经挂载一样),这意味着如果您不了解正在发生的事情,则可能很难进行故障排除。最好对它们进行试验,并在实际项目中实施之前通读所有文档。

与类相比,测试钩子的支持/文档​​仍然有限。 https://dev.to/theactualgivens/testing-react-hook-state-changes-2oga

答案 3 :(得分:0)

使用Hooks的最佳原因是:干净的代码和更好的开发经验。因为有时复杂的组件使代码难以阅读。因此,我们可以改用钩子。但这并不意味着react将取代类。 React将继续支持两者。 有关更多信息,请参阅文档https://reactjs.org/docs/hooks-intro.html