简介
eslint-plugin-you-dont-need-recompose 是一个用于 React 项目的 ESLint 插件，它能够检测项目中用到的 recompose 库中的不必要的高阶组件，并且给出替代方案。该插件帮助我们简化项目中的高阶组件，让组件更易于维护和扩展。
安装
要使用 eslint-plugin-you-dont-need-recompose，我们需要先安装 eslint 和该插件：
npm install eslint eslint-plugin-you-dont-need-recompose --save-dev
配置
在 ESLint 配置文件中，添加 plugin 和规则：
-- -------------------- ---- -------
-
---------- -
-------------------------
--
-------- -
--------------------------------------- --------
---------------------------------------------- --------
------------------------------------------------------------ -------
-
-目前该插件提供了三个规则：
no-branching：不允许使用branch或renderComponent等组合函数。no-static-branching：不允许使用静态branch或renderComponent，可以使用branchOn。no-nested-higher-order-components：不允许链式组合高阶组件，例如withState(withProps(SomeComponent))。
示例
我们来看一个使用 recompose 的例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- ------- --------------- - ---- ------------
----- ---------------- - -- -- ----------------------
----- ----------- - -- ------ --------- -- -- -
-----
----------- -------------
--------------- - ------------ - ---- ---------------
------
--
------ ------- ------------------ ----------- ---
-------
-- --------- -- -- ----------
---------------------------------
--------------
--该组件使用了 withState 和 branch 两个高阶组件。如果我们使用 eslint-plugin-you-dont-need-recompose 对该代码进行检查，将会得到两个警告信息：
11:1 error Using branch is not recommended you-dont-need-recompose/no-branching 15:3 error Using renderComponent is not recommended you-dont-need-recompose/no-branching
这是因为该组件中使用了 branch 和 renderComponent 两个组合函数。为了简化代码，我们可以使用以下方式重构：
-- -------------------- ---- -------
----- --------- - -- --------- -- -- ----------
----- ----------- - -- ------ --------- -- -- -
-----
----------- -------------
--------------- - ------------ - ---- ---------------
------
--
----- ---------------- - -- -- ----------------------
------ ------- ------------------ ----------- ---
------------------- -----------------------------------------------
--这里我们使用了 branchOn 函数代替了 branch 函数，并且将 renderComponent 函数提取为了一个独立的组件 LoadingComponent。这样代码看起来更加简洁、易读。
总结
eslint-plugin-you-dont-need-recompose 可以帮助我们简化 React 项目中使用 recompose 库的高阶组件，并且提供了详细的检查和替代方案。使用该插件可以让我们更好地维护项目代码，提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672683660cf7123b3662a