NPM 包 react-select-virtualized 使用教程

阅读时长 9 分钟读完

React Select 是许多 React 开发者喜欢使用的一种表单组件。该组件提供了高度定制化、可访问性和用户友好的界面来选择一个或多个选项。然而，对于小型数据集，它的性能表现良好；但是，对于大型数据集，React Select 是一个很可怕的选择，因为它会加载所有选项并在屏幕上显示它们，这很容易导致性能问题和用户体验差。

在这个时候，就需要 react-select-virtualized 这个 NPM 包来实现一个高性能、支持大型数据集的 Select 组件。该包提供了一个基于 React-Virtualized 的 React Select 组件，可以在滚动时仅渲染选项，从而提高显著的性能和渲染效率。

本文将介绍 react-select-virtualized 的使用方法，并提供详细的示例代码和指导意义。

安装 react-select-virtualized

安装此 NPM 包非常简单。你只需要使用以下命令将其添加到你的项目中：

导入及使用组件

当你已经安装好了 react-select-virtualized，你就可以按照以下示例导入它了：

-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ---------------
------ ----------------- ---- ---------------------------

----- ------- - -- ------ ------- --- ------ - -- - ------ ------- --- ------ - ---

----- --- ------- --------------- -
  ----- - -
    --------------- ----
  --

  ------------ - -------------- -- -
    --------------- -------------- ---
  --

  -------- -
    ----- - -------------- - - -----------

    ------ -
      -----
        --------- -----------
        -------
          ------------------- -- -------
          ----------------------
          ----------------------------
          -----------------
        --

        --------- ------ ----------------
        ------------------
          ------------------- -- -------
          ----------------------
          ----------------------------
          -----------------
        --
      ------
    --
  -
-

------ ------- ----

在上述示例代码中，我们将 react-select 和 react-select-virtualized 分别导入到我们的文件中，并将它们展示在一个简单的 React 组件中。你可以看到，这两种方式是非常类似的，它们都有一个 options 属性，可以绑定到一个由 label 和 value 组成的对象数组上，以及 value 和 onChange 属性，可以用来设置和获取当前选中的选项。

需要注意的是，由于 VirtualizedSelect 是基于 Select 进行开发的，因此我们不需要再额外引入任何其他 Select 的样式。

指定 height 和 rowHeight

VirtualizedSelect 是通过 React-Virtualized 来实现 React Select 组件的虚拟化的。React-Virtualized 要求在创建 List 组件时指定一些属性，例如 height 和 rowHeight，以告诉虚拟滚动组件实际上应该渲染多少数据行，以及要渲染每行的高度是多少。

对于 VirtualizedSelect，我们应该手动指定这些属性，如下所示：

-- -------------------- ---- -------
------ ----- ---- --------
------ ----------------- ---- ---------------------------

----- ------- - -- ------ ------- --- ------ - -- - ------ ------- --- ------ - ---

----- --- ------- --------------- -
  ----- - -
    --------------- ----
  --

  ------------ - -------------- -- -
    --------------- -------------- ---
  --

  -------- -
    ----- - -------------- - - -----------

    ------ -
      -----
        ------------------
          ------------------- -- -------
          ----------------------
          ----------------------------
          -----------------
          ------------ -- -- ------
          -------------- -- ------
        --
      ------
    --
  -
-

------ ------- ----

在这里，我们手动设置了 height=200 和 rowHeight=40，从而显示20个选项，每个选项高40像素。请注意，这些值可以根据您的需要进行更改。

注意，如果你不指定这些值，你仍然可以通过滚动来显示所有选项。但是这样的话就完全没有利用到 React-Virtualized 的优势了。

为 Select 提供 onMenuScroll 和 onMenuOpen 属性

和原生的 Select 组件一样，VirtualizedSelect 组件也提供了 onMenuOpen 和 onMenuScroll 属性，可以触发打开菜单和滚动菜单时的回调。

我们可以使用这些回调来实现许多不同的功能，例如使用手动触发方式加载更多数据或监听用户滚动菜单的行为。

下面示例代码展示了如何使用 onMenuScroll 属性来模拟无限滚动，以向用户显示更多选项：

-- -------------------- ---- -------
------ ----- ---- --------
------ ----------------- ---- ---------------------------

----- --- ------- --------------- -
  ------------------ -
    -------------

    ---------- - -
      -------- ---
      ----- -
    --

    --------------------- - ---------------------------------
  -

  ------------------- -
    -------------------
  -

  -- --------
  ------------- -
    ----- - ---- - - -----------

    ------------- -- -
      ----- ---------- - ------------ ------- --- -- --- -- -- ----------- -- --
        ------ ------- ------ - --- - ---- - ----
        ------ ---- - --- - ---- - -
      ----

      ----------------------- -- -
        ------ -
          -------- ---------------------- ---------------
          ----- -------------- - -
        --
      ---
    -- ------
  -

  -- ------------
  ------------------- -
    --------------------
    -------------------

    ----- - ------ - - --
    ----- - ---------------- - - ---------
    ----- - ------------- ------------- --------- - - -------

    -- ----------------- -- --------- - ------------ -- ------------ - --- -
      -------------------
    -
  -

  -------- -
    ----- - ------- - - -----------

    ------ -
      -----
        ------------------
          -----------------
          ------------------------------------
        --
      ------
    --
  -
-

------ ------- ----

在这个例子中，我们将一个空的 options 数组放到 this.state 中，然后在 componentDidMount 中开始加载数据。loadOptions 方法用于模拟异步加载数据，为 options 数组添加了100个新选项，然后通过更新 state 来显示新的选项。

但是这样会导致整个 【已经加载的选项列表】被重新渲染，而如何减小渲染开销呢？使用VirtualizedSelect 的 onMenuScroll 属性，监听用户是否滚动到菜单的底部，如果滚动到底部，就用 loadOptions 方法加载更多数据，从而实现无限滚动的效果。

总结

本文详细介绍了 react-select-virtualized 这个 NPM 包的使用方法，给出了详细的示例代码。在使用 react-select-virtualized 时需要注意以下几点：

  • 遵循 React-Virtualized 的规则，手动设置 height 和 rowHeight 参数来实现高效渲染；
  • 可以使用 onMenuOpen 和 onMenuScroll 属性来实现高级功能，例如触发加载数据、监听用户滚动；
  • 在组件的使用中，需要重新导入 react-select。

希望这篇文章对您有所帮助，如果有疑问或者建议，欢迎在评论中指出。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/161295

相关推荐
精选内容