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

前端之家收集整理的这篇文章主要介绍了javascript – 使用钩子和类组件来反应功能组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
随着在React中引入 hooks,现在的主要困惑是何时使用带有钩子和类组件的功能组件,因为在钩子的帮助下,即使在功能组件中也可以获得状态和部分生命周期钩子.所以,我有以下问题

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

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

提前致谢.

解决方法

引入Hooks和其他功能(如React.memo和React.lazy)背后的想法是帮助减少必须编写的代码并将类似的操作聚合在一起.

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

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

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

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

functional 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.

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

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

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

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

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

猜你在找的JavaScript相关文章