对于前端开发人员而言，一般都会遇到大量数据的情况，特别是在开发长列表的时候。在 Next.js 中，长列表性能的优化尤为重要，因为它是一个非常流行的 React 框架，因此下面就来探究一下解决 Next.js 中长列表性能问题的方法。
常见问题
1. 初始化数据过多导致时间延迟
长列表初始化需要大量的数据，这会让浏览器在加载时感到很慢。当使用getInitialProps或getServerSideProps时，应该只返回需要渲染的数量的数据。
正确的方式是将 API 请求的数据拆分成多次更新，以避免在页面初次加载时将所有数据拉出。
2. 数据更新时引起的性能问题
当数据从服务端返回时，每个列表项将被重新渲染。这意味着在更新数据时，页面的响应时间会变慢，从而降低用户体验。
这可以通过React技术中的React.memo来优化，即只渲染有更改的组件。另外，尽可能少地使用useState，而使用组件的属性来传递数据。
3. 用户手动滚动时的响应速度
用户滚动过程中还需要保持反应迅速。这可以通过使用window.requestAnimationFrame来创造具有超高帧率的滚动。
优化方法
了解了上述问题，下面就来介绍如何优化 Next.js 中的长列表性能。
懒加载 与 无限滚动
优化大量数据的方法之一是使用react-virtualized库。这个库可以将列表项进行懒加载，意味着只有在列表项被滚动到可见区域时才加载每个项。
同时，它还提供了一个属性，可以实现无限滚动并加载列表项。这样做会减少加载期间的数据请求。
-- -------------------- ---- -------
------ - --------------- ---- - ---- --------------------
-------- ------------- -------- -- -
-------- -------------- ----------- --------- -- -
-- ------
-
-------- ------------- ----- -- -
-- -----------
-
------ -
---------------
-------------------------
---------------------------
--------------------------
-
--- --------------- ------------- -- -- -
-----
-------------------
-------------------------------
--------------------------
---------------
--------------- ------ ---- ----- -- -- -
---- --------- --------------
-----------------
------
--
-----------
------------
--
--
-----------------
--
-这里的loadMoreRows是一个回叫函数，用于提供更多的数据项，滚动到列表末尾的时候会自动调用。isRowLoaded则是一个返回布尔值的函数，用于检查列表的某一行是否已经加载。
使用React.memo
使用React.memo可以创建高阶组件（HOC），它将包装组件并仅在组件属性更改时重新呈现。
-- -------------------- ---- ------- ------ ------ - ---- - ---- -------- ------ ----- --- - ------- ------ ---- -- -- - ------ ----------------------- -- ---------- -------- ------------------- ---------- - ------ --------------- --- --------------- -- -------------- --- --------------- -
这里将示例中的Row组件包装成memo，并将areEqual函数传递给它，这个函数的作用是判断是否需要重新渲染。
针对任务执行器的优化
在更高级的应用中，您可能需要按顺序执行任务列表。在这种情况下，任务执行器可以将方法标准化，并在状态更新时立即运行它们。
-- -------------------- ---- -------
------ ------ - ------------ ---------- -------- - ---- --------
-------- ---------- ----- -- -
----- ------- --------- - ---------- -------- --- ---------- -- ---
----- ---------- ------------ - ------------
----- ------------------- - -------------- -- -
-- -------
---
----- ----------------- - -------------- -- -
------------------ -- -
------ -
-------------
-------- ---------------------- ----------
--
---
------------------------ -- ------------ - ---
---
------------ -- -
----------------------
-- ---------
------------ -- -
--------------------
-- ----
------ -
--
--------------------- - - -- -------- ---
---------------------------------- -- -
---- ------------------------------------------------
---
---
--
-这里使用了useCallback和useEffect来控制任务的执行。State来跟踪所有待决任务和已完成任务，并使用runFirstPendingTask函数来开始运行任务。这是由于当任务列表发生更改时，它将在useEffect中作为依赖项重新运行。
Waypoint
react-waypoint是一个非常实用的库，它可以跟踪拖动或滚动过程中特定的元素是否可见。
-- -------------------- ---- -------
------ -------- ---- -----------------
-------- ---------- ----- -- -
----- -------------------------- - ------------
------- -- -
-- --------- -
-- ----
-
--
-------
--
------ -
--
----------------- ------ -- -
---- ------------
------
------ --- ------------ - - -- -
--------- ------------------------------------ ------------------------------------ --
--
------
---
---
--
-这里用react-waypoint检查最后一个元素是否可见，同时在onEnter和onLeave中控制执行相应的代码。
结论
以上是一些解决 Next.js 中长列表性能的问题及优化方法。合理的内存管理、骨架屏的引用、列表项的懒加载，使用stateless组件等，都可以使下一个React.js长列表在性能上更加平稳，让用户有更舒适的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671a02479babaf620fa06561