对于前端开发人员而言,一般都会遇到大量数据的情况,特别是在开发长列表的时候。在 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