npm 包 @john-osullivan/react-window-dynamic-fork 使用教程

前言

在前端开发中，列表渲染是非常常见的需求，但是当列表数据过多时，渲染必须非常快才能保证用户体验的流畅性。这时候就需要用到虚拟列表，它只渲染当前可见区域的数据，从而减小了渲染的性能消耗。

在 React 中，用到虚拟列表的情况也很多，react-window 就是一个非常好用的虚拟列表库。但是它本身是以固定的行高来计算滚动位置和可见区域，当列表项高度不统一时，它就无法准确计算滚动位置和可见区域。而 @john-osullivan/react-window-dynamic-fork 就是为了解决这个问题而生的。

安装

在项目中运行以下命令进行安装：

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

使用

1. 首先，需要从 @john-osullivan/react-window-dynamic-fork 中引入 DynamicSizeList。

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

1. 然后按照 react-window 的用法，设置列表项和计算可见区域的方式。但是需要注意的是，要 new 一个 sizeMap 对象，用来保存每个列表项的高度。

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

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

1. 最后，渲染列表。需要传递以下参数：

• DynamicSizeList 组件本身的 props。
• itemSize：计算每个列表项的高度的函数，必填。
• itemCount：列表项数量，必填。
• sizeMap：保存每个列表项高度的 Map 对象，必填。
• children：列表渲染函数，必填。

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

示例代码

下面是一个使用 DynamicSizeList 渲染虚拟列表的示例代码：

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

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

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

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

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

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

结语

@john-osullivan/react-window-dynamic-fork 是一个非常好用的虚拟列表库，它可以支持不同高度的列表项，并且还可以以尽可能小的时间渲染大量数据。在实际开发中，如果遇到了列表项高度不统一的问题，可以尝试使用它。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60067359890c4f7277583df4