简介
declassify 是一个用于去除 React 组件的 class 名称的 npm 包。通常在使用 React 开发时，我们为了方便的管理组件的状态以及组件的生命周期，会使用 ES6 的 class 定义组件，但是这样会在生成的代码中带有 class 标记和构造函数等带有 ES6 特性的代码，会使得生成的代码量变得更大，并且会增加编译的时间，declassify 就是为了解决这样的问题。
安装
安装 declassify 非常简单，只需要在终端执行以下命令即可：
--- ------- ---------- ----------
使用
使用 declassify 也非常容易，只需要在 webpack 的配置文件中加入相应的配置项即可。以下是使用 declassify 的示例代码：
----- ------- - -------------------
----- ---- - ----------------
----- ----------------- - ---------------------------------------
----- ------ - -
------ -----------------
------- -
----- ----------------------- --------
--------- ---------------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
-
------- ---------------
-------- -
-------- --------------------- ----------------------
-
--
-
------- ---------------------------
-
-
--
-
----- ---------
---- ---------------------------
--------- ---------------
---- --------------
--
-
-
--
-------- -
--- ----------------------------
-
-
-------------- - -------以上代码中，我们在 webpack 的 module.rules 中使用了 declassify-webpack-loader, 这个 loader 就是我们安装过的 declassify, 它会在打包时自动去除掉组件的 class 名称。在开发中，我们使用的组件类名可以在 webpack 的配置文件的 .js 对应的 loader 中通过 options 配置项进行设置，如：
-
------- ----------------------------
-------- -
--------- -------------
-
-示例
为了进一步帮助带领读者学习和使用 declassify, 我们为大家提供一个简单实用的示例, 请参考以下代码：
------ ------ ----------- ---- --------
------ --------- ---- -------------
------ ---------------
----- ------ ------- --------- -
------ --------- - -
---------- -----------------
-------- ---------------
--
------ ------------ - -
-------- -- -- ---- --
---------- ---
--
-------- -
----- ----------- -------- --------- - -----------
------ -
------- ------------------ -------------- ------------------
----------
---------
--
-
-
------ ------- -------以上代码是一个标准的 React Button 组件实现，在打包之前界面会根据上方给出的 webpack 配置自动去除组件类名。
总结
declassify 是一个非常实用的 npm 包，可以针对 React 组件中隐藏类名，优化最终嵌入在网页中的代码的大小和网络传输，同时使得编译的速度更快。同时我们需要注意，declassify 是通过解析和重构 React 组件树来去除类名的，是通过一些复杂的正则表达式和分解组件分析子树使得组件不再依赖类名从而实现。这样也会使得它在某些奇特的情况下无法正确的工作或者造成一些未知的副作用，但是 framer-motion 这样的高度集成的 React 动画库中也使用了它，并且开发人员也对它进行了快速迭代以满足社区不断更新的需要。
在使用的过程中需要注意，我们不应该过于依赖 declassify，而是应该减少对类名的依赖，尽可能的使用数据来控制每一个组件。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedcaa6b5cbfe1ea061247c