框架篇-面试题7-React中hooks的优缺点是什么

最新推荐文章于 2025-07-16 16:23:24 发布

原创最新推荐文章于 2025-07-16 16:23:24 发布 · 859 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#react.js #javascript #前端 #ecmascript #前端框架

本文探讨了React Hooks的优点，如提高代码可读性、简化组件层级和状态管理，以及测试便利性。同时，也分析了其缺点，包括对生命周期支持有限、学习曲线较陡峭及兼容性问题。在实际应用中，开发者应根据需求选择合适的状态管理方式。

在react中,hooks是一个非常抽象的概念,对初学者,往往不是很友好,比较一下React中hooks的优缺点

优点

[1]. 代码的可读性强,使用hooks之前,发布/订阅自定义事件需要挂载到componentDidMount生命周期上面,然后需要在componentWillUnmount生命周期中清除,在使用hooks之后,通过useEffect,可以把componentDidMount生命周期,componentDidUpdate生命周期,还有componentWillUnmount生命周期集中在一起,方便代码的维护

[2]. 组件的层级更浅,在使用hooks之前,通常使用高阶组件Hoc的方法来实现多个组件共用状态,增强组件的功能,这样是增加了组件渲染的开销,影响了性能,但是在Hooks中可以使用自定义hooks组件useXXx()的方法将多个组件之间共用的状态放到自定义hooks就可以轻松的做到状态的共享

[3]. 不用在考虑class类组件this的指向问题了,在hooks组件中不需要使用this.state来获取数据和方法了

[4]. 可以从组件中提取状态逻辑,使得这些逻辑可以单独测试并复用,Hook使你在无需修改组件结构的情况下复用状态逻辑,这使得在组件间共享Hook变得更便捷，也就是可以大大减少冗余的代码,尤其是针对那些需要复用逻辑的场景

[5]. 没有破坏性改动,Hook不会影响对React概念的理解,Hook为已知的React概念提供了更直接的API,props,state,context,refs以及生命周期，同时Hook提供了一种强大的方式来组合它们

[6]. 更易于测试: 由于hooks是纯JavaScript函数,因此他们易于编写单元测试并模拟

缺点

[1]. 一个useEffect里面不能写太多东西,把每个不同的功能分给多个useEffect来使用,分成多个模块,把每个功能块分开来写遵循了软件设计当中的单一职责模式,hooks的useEffect只包括conponentDidMount,componentDidUpdate和componentWillUnmount这三个生命周期,对于其他的class类组件的生命周期却不支持

[2]. 不要在class组件中调用hook,这样是无效的,不能完全模拟类组件的生命周期,虽然可以使用useEffect hook来模拟,但是它使用起来需要更多的思考和规划

[3]. Hooks是一种新的特性，存在一些兼容性的问题,相对类组件方式,学习曲线比较陡峭,需要一些时间来适应这种编程模式

React中hooks的优点主要是提高了代码的可读性和性能，方便代码的维护和迭代，同时也可以更好地实现状态共享,但是也需要在使用中结合具体的场景和需求来选择最合适的方式,无非就是有了hook,多了一种技术方案选择

JS面试题18-说一说网页当中性能优化有哪些性能指标，如何量化

2023-03-14