在前端开发中，高阶组件（HOC）已经是一个非常常见的概念，可以说是 React 工程师必须掌握的技能之一。从 React16.3 版本开始，React 社区提供了类似 createRef，forwardRef 等常用的核心 API 一样，提供了专门用于实现 HOC 的 API 和方式。本文将为大家介绍另一个非常实用的工具——extract-hoc，它能够帮助 React 开发者快速地将复杂的 HOC 拆解成更为简洁和易读的模块，从而提高代码的可Readability 和可维护性。
extract-hoc 概述
extract-hoc 是一个专门用于 HOC 拆解的 npm 包，在提高可 Readability 和可维护性的同时，还能够更好地模块化相同的 HOC 功能，供其他组件重复使用，提高代码的复用性。该包使用简单，支持基于 TypeScript 语言的 React 项目使用，并且还提供了非常详细的文档，方便开发者上手。
extract-hoc 使用教程
下面我们将通过一个简单的示例，详细介绍 extract-hoc 的使用方法。
安装 extract-hoc
首先，我们需要在项目中进行安装 extract-hoc 包，我们可以通过 npm 或者 yarn 命令来进行安装：
npm install extract-hoc --save-dev
或者
yarn add extract-hoc --dev
示范
我们假设这样一种场景，我们的应用有若干个页面组件，这些组件在渲染之前都需要权限校验，校验的逻辑实现是一个 HOC（高阶组件）：
-- -------------------- ---- ------- ------ ----- ---- ------- ------ --------- ---- ------------ ------ - ------- - ---- ------------- ------ ------- -------- ----------------------------- - ----- -------------- ------- --------------- - -------------------- - ----- ------ - ----------------- -- --------- - -- ------------------ --------------------------------- - - ------------------------------ - ----- ------ - ---------------- -- --------- - --------------------------------- - - -------- - ------ ----------------- --------------- -- - - ------------------------ - - ------- -------------------------- -------- ---------------------------- - -------- ---------------------- - ------ - ------- ------------------ - - ------ ---------------------------------------- -展开代码
然后，我们在每个需要权限校验的 Page 中使用该 HOC（高阶组件）：
-- -------------------- ---- ------- ------ ----- ---- ------- ------ ----------- ---- ---------------- ----- -------- ------- --------------- - -------- - ------ - ----- ---------- -------------- ------ - - - ------ ------- ---------------------展开代码
众所周知，使用 HOC 在组件中包裹一个包含其他组件逻辑的组件，使得代码更加复杂和难以阅读。如果一个应用中有多个 HOC，最终页面代码将变得极其混乱。此时，利用 extract-hoc 将其拆分成可复用的模块，将会提高应用程序的可维护性和可读性。
我们可以利用 extract-hoc 包将 requireAuth 拆解为两个部分：一个是组件部分（Authentication），另一个是功能部分（requireAuth），操作如下：
安装命令基于npm 或者yarn 命令来进行安装：
npm install extract-hoc --save-dev
或者
yarn add extract-hoc --dev
-- -------------------- ---- ------- -- ---- -- ----------------- ------ ----- ---- ------- ------ --------- ---- ------------ ------ - ------- - ---- ------------- ----- -------------- ------- --------------- - -------------------- - ----- ------ - ----------------- -- --------- - -- ------------------ --------------------------------- - - ------------------------------ - ----- ------ - ---------------- -- --------- - --------------------------------- - - -------- - ------ ----------------- --------------- -- - - ------------------------ - - ------- -------------------------- -------- ---------------------------- - -------- ---------------------- - ------ - ------- ------------------ - - ------ ------- -------------- -- ------ -- --------------- ------ ----- ---- ------- ------ - ------- - ---- ------------- ------ -------------- ---- ------------------ -------- ----------------------------- - ------ ---------------------------------------------------------- - -------- ---------------------- - ------ - ------- ------------------ - - ------ ------- -----------展开代码
首先，我们需要将 Authentication 组件从 requireAuth 中剥离出来并单独定义。然后，我们将 Authentication 组件 export。最后，我们需要在 requireAuth 中引用 Authentication 组件，最终的代码分为两个文件，分别是 authentication.js 和 require_auth.js，可以单独进行导入和使用。这样，我们的代码就变得更加清晰和易于维护。
总结
extract-hoc 是一个非常实用的 npm 包，在提高代码可维护性和可 Readability 的同时，还能够提高代码的复用性和模块化程度，使代码更容易阅读和维护。虽然使用 HOC 可能会使代码变得冗长和难以阅读，但是 extract-hoc 的出现解决了这个问题，为了让代码更加简洁易读，我们应该引入 extract-hoc 的这种思想来重构代码，使代码更加易读和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/138841
