React Hooks相对高阶组件和Class组件有什么优势/缺点

文章开始前需要事先跟朋友声明下，此篇文章仅仅是笔者自己的分析与感想，非官方说明。如有不当之处，欢迎指出。

React Hooks相对高阶组件和Class组件有什么优势/缺点？

一、Hooks组件相比于Class组件

首先我认为hooks组件其实是降低了react开发的使用难度的，让新手可以在不使用class组件的情况下依然可以进行项目开发。

可能会有朋友感到疑惑，为什么不使用class组件会降低项目的开发难度。
笔者略举几个例子：
1.不需要学习class组件的生命周期的使用了。【仅做个了解即可】
2.如果你的js基础不是很扎实的话，就帮你暂时省去this的指向问题的学习了。
3.可以不用使用高阶组件依然可以进行功能复用了。
4.如果开发团队的代码质量很高的话，那么维护起来比class组件简单N倍。
5.只需要学好hooks组件的hooks【感觉有点别扭，但不是错误哈】那么你的项目性能就已经是很优的状态了。

学习class组件的生命周期的话还是需要一些时间的，尤其是想要真正用到实战项目中去发挥它们每个周期的作用的话。

二、Hooks组件相比于高阶组件

Hooks组件复用逻辑相比高阶组件复用逻辑更易维护，可以很清楚的知道当前的逻辑代码在哪里，然后进行维护。

举一个极端的例子：

某个组件从3个以上的高阶组件去复用逻辑。

那么它的代码可能看起来是这样：

this.props.xxx();
this.props.aaa();
this.props.bbb();

如果xxx出现了问题，如果对项目不熟悉的人的话想要找这个方法就要分别去这三个高阶组件里面去找，或者去父组件里面去找。

可维护性差！

我们来看一下Hooks组件：

const { xxx } = useXXX();
const { aaa } = useAAA();
const { bbb } = useBBB();

当我们发现那个有问题的时候哪里有问题点哪里即可，很轻松的就能找到代码。
so easy~