React深入理解HOC以及它的应用

您好,我是沧沧凉凉,是一名前端开发者,目前在掘金知乎以及个人博客上同步发表一些学习前端时遇到的趣事和知识,欢迎关注。


React涉及到的一系列东西还是非常多的,之前我的注意力完全是在业务上面了,格局小了,我突然之间发现React还有非常多的东西,比如说HOC,那么到底什么是HOC。

我个人是没有在项目中使用过HOC的,我在之前的项目中,自定义Hook已经完全能够满足代码复用性的问题,所以我甚至没有接触过HOC,直到最近开始面试,面试官问到了这个题目,我感觉这个可能是面试中的高频问题,所以立刻来恶补一波。

高阶组件(HOC)是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分,它是一种基于 React 的组合特性而形成的设计模式。

翻译一下就是HOC其实跟React没啥关系,也不是React提供的工具,它就是一个参数为组件,返回值为新组件的函数。没错,它的本质就是一个普普通通的函数。

废弃的mixin

有一篇非常长的文章写了React为什么要废弃mixin,我看了一下,大致原因是因为下面几点:

正如Vue3中也不推荐大家再使用mixin一样,之前在Vue的文章我也曾经提到过,使用mixin会导致代码的可读性变差,某些变量不知道在哪儿进行了修改,多个mixin的情况下代码会非常难以维护。

HOC的基本用法

HOC和装饰器

HOC VS Hooks

应用场景

谈及应用场景的时候,我会将一些场景结合自定义Hook来进行比较,因为我对于自定义Hook的熟悉程度远远高于HOC的熟悉程度,正如上面所说,我个人是没有怎么接触过HOC的,来恶补它完全是因为面试的原因…

最后

就我个人感觉,在Hooks出现后,大部分需要使用到HOC的情况都能通过Hooks进行实现,而且Hooks对比HOC拥有更多的优势。

最后推荐一篇文章:「react进阶」一文吃透React高阶组件(HOC)写的非常好,


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!