React为什么要引入Hooks?这是一道非常高频的面试题,但是大多数的前端要么回答不出来,要么回答不完整。老规矩,点赞收藏支持一下,给我一分钟,理想哥教你该怎么满分回答这个问题。
如果我是求职者,我会这么回答:
React引入Hooks主要是为了解决类组件中的以下问题:
第一:在组件之间复用状态逻辑很难
在类组件中,比如,你使用redux创建了一个状态仓库,而这段代码好多个组件都在用,你就得在每个组件中引入store,是可以解决问题,但是很繁琐,也有的人说,那我可以使用高阶组件来优化,是可以的。但是如果遇到那种需要多层嵌套使用的公用组件,不管是 高阶组件还是render props ,都会遇到嵌套地狱的问题,使你的代码难以理解。
而Hook可以让你从组件中抽取状态逻辑,然后单独封装,不仅可以实现组件之间的状态复用,也可以单独对这些逻辑进行测试以保证稳定性。
注意,回答到这里,你就可以拿到50分了。
第二:复杂组件逻辑难以理解
在类组件中,随着项目越来越复杂,参与开发的人越来越多,代码越来越难以理解。其中一条就是,因为类组件每个生命周期只能写一次,导致每个生命周期内都充斥这各种逻辑不同甚至不相关的代码,整个文件变得越来越臃肿,越来越难以理解,还容易出现各种各样的bug。
而Hook可以不用所有逻辑都挤在同一个生命周期内,你可以把组件中有关联的代码都拆分成更小的函数,也可以按照功能将不同的代码划分到同一个hook函数中。你的代码会变得更加清爽,可读性会更强
第三:避免使用难以理解的 class 写法
在类组件中,class的写法经常让很多人搞不清楚,很多初学者都会经常因为找不到this而发愁,而且,class组件也会给一些工具带来问题,比如不能很好的压缩,并且会使热重载出现不稳定的情况。
而Hook的出现,让你可以不用再去学习难以理解的class写法了,可以更加专注于业务代码的编写。
以上就是这个问题的回答了,建议大家反复观看,下次面试时候试试这么说,看看效果怎么样。