React为什么要引入Hooks？到底解决了什么问题？

哈喽，大家好呀，我是前端理想哥，今天我们来聊聊React的Hooks。

React为什么要引入Hooks？Hooks解决了什么问题，这是一道React的高频面试题，面试官可以通过这道题考察你对于Hooks的了解到底有多少。今天，理想哥就和大家一起来聊清楚这个问题。

在React最初出现时候，99%的组件其实都是类组件，而函数组件只能作为静态组件展示，因为你可以在类组件内部使用状态还有副作用等，而这些功能函数组件都做不了。

而随着React的不断发展，慢慢的类组件的缺点越来越明显了，主要有以下几个：

第一，在组件之间复用状态逻辑很难

比如，你使用redux创建了一个状态仓库，而这段代码好多个组件都在用，在类组件中，你可能就得在每个组件中引入store，是可以解决问题，但是很繁琐，也有的人说，那我可以使用高阶组件来优化，是可以的。但是如果遇到那种需要多层嵌套使用的公用组件，不管是 高阶组件还是render props ，都会遇到嵌套地狱的问题，使你的代码难以理解。

React需要为共享状态逻辑提供一个更好的解决方案

第二，复杂组件变得难以理解

随着你们项目越来越复杂，参与开发的人越来越多，你会发现，代码越来越难以理解。其中一条就是，因为类组件每个生命周期只能写一次，导致每个生命周期内都充斥这各种逻辑不同甚至不相关的代码，整个文件变得越来越臃肿，越来越难以理解，还容易出现各种各样的bug。

第三，难以理解的 class

即使有很多有经验的 React 开发者，可能有时候也对类组件中的class搞不清楚，对于里面this的工作方式不清楚。很多初学者都会经常因为找不到this而发愁，而且，class组件也会给一些工具带来问题，比如不能很好的压缩，并且会使热重载出现不稳定的情况。

幸好，在React 16.8，Hook来了，那么Hook是怎么解决这些问题的呢？我们一个个来看。

Hook可以让你从组件中抽取状态逻辑，然后单独封装，不仅可以实现组件之间的状态复用，也可以单独对这些逻辑进行测试以保证稳定性。

有了Hook，你就可以不用所有逻辑都挤在同一个生命周期内了，你可以把组件中有关联的代码都拆分成更小的函数，也可以按照功能将不同的代码划分到同一个hook函数中，你的代码会变得更加优雅，可读性更强。

最后，Hook的出现，让你可以告别让人难以理解的class了，也不用再去理解里面复杂的this指向了，可以更加专注于业务代码的编写。

除了上面几点，我觉得Hook还有几个优点

第一点，我觉得 hook 的函数式编程风格会让你的代码变得更加清爽，可读性会更强。因为你可以根据逻辑对代码进行功能的分类整合

第二点，我觉得会让你的组件树层级变浅。render props和高级组件是可以解决代码复用问题，但也会让你的组件树层级变得更多，而Hook可以让你在实现功能情况下，组件树层级还不会变多

最后，我觉得最终的就是，可以让你不用再花时间去学恶心的class了，心情都舒畅了。

以上，就是文章的所有内容了，我们讲了react为什么要引入Hooks？解决了什么问题，如果大家觉得理想哥本节视频还不错，欢迎给理想哥一个关注，万分感谢大家