介绍
react-enhance 是一个用于 React 框架的增强工具包，它包含了一些常用的功能和组件，可以帮助开发者更快有序地开发 React 应用程序。
react-enhance 提供的功能包括但不限于：
- 组件类型检查
- 数据验证
- 状态管理器
本篇文章将详细介绍如何使用 react-enhance 并提供示例代码。
安装
在使用 react-enhance 之前，需要先安装它。
npm install react-enhance
使用
react-enhance 中的大多数功能都是作为高阶组件 (Higher Order Components，HOCs) 实现的，因此使用时需要将需要增强的组件传入相应的 HOC 中。
以下是一些常见的使用场景及相应的 HOC。
组件类型检查
为了确保组件的输入符合预期，可以使用 prop-types 库进行检查。但是在大型项目中手动添加 prop-types 会非常繁琐和容易出错，因此 react-enhance 提供了一个 enhanceWithTypeChecking HOC，它会自动生成 prop-types。
-- -------------------- ---- -------
------ ----------------------- ---- --------------------------------------------
----- ----------- ------- --------------- -
-------- -
------ -
-----
--- ---- ---
------
--
-
-
------ ------- -------------------------------------数据验证
为了确保组件的输入的数据符合预期，可以使用 Joi 库进行验证。但是在大型项目中手动添加 Joi 会非常繁琐和容易出错，因此 react-enhance 提供了一个 enhanceWithDataValidation HOC，它会自动生成数据验证方法。
-- -------------------- ---- -------
------ ------------------------- ---- ----------------------------------------------
------ --- ---- ------------
----- ----------- ------- --------------- -
-------- -
------ -
-----
--- ---- ---
------
--
-
-
------------------------- - -
-------- --------------
-------- ------------------------
--
------ ------- ---------------------------------------状态管理器
为了实现组件间的通信或减少重复数据请求等，可以使用状态管理器。在 React 中，常用的状态管理器有 Redux 和 MobX。但是使用这些库需要进行一些冗长的配置和学习，因此 react-enhance 提供了一个 enhanceWithStateManagement HOC，它会自动集成状态管理器。
-- -------------------- ---- -------
------ -------------------------- ---- -----------------------------------------------
----- ----------- ------- --------------- -
-------- -
------ -
-----
--- ---- ---
------
--
-
-
------ ------- --------------------------------------- -
------ -
-- -----
--
-------- -
-- -------
--
---一个完整的例子：
-- -------------------- ---- -------
------ ----------------------- ---- --------------------------------------------
------ ------------------------- ---- ----------------------------------------------
------ -------------------------- ---- -----------------------------------------------
------ --- ---- ------------
----- ----------- ------- --------------- -
-------- -
------ -
-----
--- ---- ---
------
--
-
-
--------------------- - -
-------- ---------------
-------- ----------------------------
--
------------------------- - -
-------- --------------
-------- ------------------------
--
------ ------- ------------------------
--------------------------
--------------------------------------- -
------ -
-- -----
--
-------- -
-- -------
--
--
-
--结语
react-enhance 是一个方便易用的 React 增强工具包，可以极大地减少开发人员的工作量。在使用之前，需要仔细考虑应用场景并进行合理的配置。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbc6db5cbfe1ea0611a0c