前端开发过程中，经常需要使用监听输入框，下拉框等 DOM 元素的变化，并采取相应的操作，比如重新渲染某个组件等。而且在多个地方使用的时候，容易出现代码的冗余，维护起来也很费劲。

memoized-change-handler 是一个轻量级的 npm 包，帮助我们对这些常见的场景进行封装，从而极大地减少代码量和维护成本。

简介

memoized-change-handler 的使用非常简单，我们只需要按照它的规范来书写我们的处理函数即可，它会自动处理多次相同的输入并缓存输出结果，这可以大大提高我们的应用性能。当然，memoized-change-handler 也允许我们手动清除缓存，方便我们在某些特殊情况下做出适当调整。

安装

我们可以使用 npm 或 yarn 来安装 memoized-change-handler：

npm install memoized-change-handler
# or
yarn add 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

npm 包 memoized-change-handler 使用教程

简介

安装

使用

参数

结语

纠错反馈