前端开发过程中，经常需要使用监听输入框，下拉框等 DOM 元素的变化，并采取相应的操作，比如重新渲染某个组件等。而且在多个地方使用的时候，容易出现代码的冗余，维护起来也很费劲。
memoized-change-handler 是一个轻量级的 npm 包，帮助我们对这些常见的场景进行封装，从而极大地减少代码量和维护成本。
简介
memoized-change-handler 的使用非常简单，我们只需要按照它的规范来书写我们的处理函数即可，它会自动处理多次相同的输入并缓存输出结果，这可以大大提高我们的应用性能。当然，memoized-change-handler 也允许我们手动清除缓存，方便我们在某些特殊情况下做出适当调整。
安装
我们可以使用 npm 或 yarn 来安装 memoized-change-handler：
--- ------- ----------------------- - -- ---- --- -----------------------
使用
我们来看一个简单的例子，假设我们有一个输入框和一个下拉框，需要根据它们的值来渲染对应的组件。我们可以使用 memoized-change-handler 来监听这两个元素的变化，将它们的值作为输入，返回对应的组件。
------ ---------------- ---- -------------------------
----- --- - -- -- -
----- ------------ -------------- - ------------
----- --------------- ----------------- - ------------
-- ---------
----- ------------ - ------------ -------------- -- -
-- --------- ----- --
-
-- -- ----------------------- --------------
----- -------------------- - ------------------------------
------ -
--
------ ------------------ ----------- -- ------------------------------ --
------- --------------------- ----------- -- ----------------------------------
-- -------
---------
--------------------------------- ---------------
---
-
-在上面的代码中，我们使用 memoized-change-handler 将 getComponent 函数进行了转换，返回优化后的 memoizedGetComponent。我们将 input 和 select 的值作为输入，经过优化后输出了一个 React 组件，并通过 useState 来渲染。
当 inputValue 或 dropdownValue 发生变化时，memoizedGetComponent 会根据其缓存机制来判断是否需要重新计算输出结果。如果之前已经执行过了，将直接返回缓存的结果，否则再进行计算，并将结果缓存下来以便下次使用。
注意：我们定义的函数要遵守以下规范，以便 memoized-change-handler 能够正确地识别它：
- 函数的输入参数必须是原始类型或对象类型。
- 函数的输出结果必须是原始类型或对象类型。
参数
useChangeHandler 函数有三个可选参数：
- equalityCheck（默认值为
Object.is）：指定判断两个输入是否相等的方法
，可以传入一个函数，用于自定义判断过程
- cacheSize（默认值为 1）：指定缓存的最大数量。由于 memoized-change-handler 是用 LRU 缓存算法实现的，指定一个合适的 cacheSize 可以确保在大量请求时，系统内存不会被过分占用。
- cacheKey（默认值为对象序列化方式）：用于自定义缓存的 key 值的生成方式，可以传入一个函数来自定义此过程。
示例代码：
------ ---------------- ---- -------------------------
----- --- - -- -- -
----- -------------------- - -----------------
------------ -------------- -- -
-- -----
--
-
-------------- --- -- -- - --- --
---------- ---
--------- ---- --- -- ------------
-
-
------ -- ---
-结语
memoized-change-handler 是一个非常有用的工具包，它能够帮助我们充分利用缓存机制，将性能提升到一个新的高度。当然，如果您的项目不需要使用此组件，也不必担心，它不会占用太多的空间，完全可以放心使用。无论是在开发还是维护过程中，都是非常值得尝试的。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600558d281e8991b448d61ed