在前端开发中，列表是经常用到的界面元素，在大量的数据渲染上，如何实现高性能的列表显示是我们需要思考的问题。Next.js 作为一个服务端渲染框架，我们可以利用其提供的优势来实现高性能的列表显示。本文就将围绕如何通过 Next.js 实现高性能的列表显示展开讨论。
优化读取数据的方式
在大量数据的情况下，前端通过 API 请求数据是一件非常耗时的操作。我们通常会在前端组件的 componentDidMount 生命周期函数中发送请求，拿到数据后再进行渲染。这种方式存在较多的问题，例如网络延迟和数据读取速度等方面上对性能产生比较大的影响。通过服务端获取数据，可以大大减少前端 Ajax 请求造成的性能损失。
我们可以采用 getInitialProps() 方法来获取服务端中的数据。它会在组件渲染前被执行，并在服务端渲染期间获取到数据。它的返回值将被作为 props 传递给组件进行渲染。
下面是一个获取数据的示例代码：
// javascriptcn.com 代码示例
import fetch from 'isomorphic-unfetch';
const MyComponent = ({ data }) => {
return (
<div>
{/* 渲染页面数据 */}
</div>
)
};
MyComponent.getInitialProps = async () => {
const res = await fetch('http://your-api-url/data');
const data = await res.json();
return { data }
};
export default MyComponent;实现无限滚动（Infinite Scroll）
在大量数据的情况下，采用分页的方式进行数据记载是比较常见的方式。但是，在数据量非常大时，翻页的操作也会带来比较明显的性能损失。这时我们可以通过实现无限滚动（Infinite Scroll）的方式来优化性能。
实现无限滚动的方式是在页面滚动到底部时再加载后续的数据。我们可以利用 Intersection Observer API 来实现这个功能。Intersection Observer API 提供了一种异步观察目标元素与其祖先或视窗（viewport）交叉情况的方法，因此可以侦测滚动事件并自动加载后续数据。
下面是一个实现无限滚动的示例代码：
// javascriptcn.com 代码示例
import { useState, useEffect, useRef } from 'react';
const MyComponent = ({ data }) => {
const [page, setPage] = useState(1); // 初始化页面为 1
const [items, setItems] = useState(data); // 初始化数据
const [isFetching, setIsFetching] = useState(false); // 初始化状态为 false
const containerRef = useRef(null);
useEffect(() => {
// 初始化 IntersectionObserver
const observer = new IntersectionObserver(handleObserver, {
root: null,
rootMargin: '20px',
threshold: 1.0,
});
if (containerRef.current) {
observer.observe(containerRef.current);
}
return () => {
observer.disconnect();
}
}, [containerRef]);
// 处理 Intersection Observer 回调函数
const handleObserver = (entities) => {
const target = entities[0];
if (target.isIntersecting) {
fetchMoreListItems();
}
}
// 加载更多数据
const fetchMoreListItems = async () => {
if (!isFetching) {
setIsFetching(true);
setPage(page + 1);
const res = await fetch(`http://your-api-url/data?page=${page+1}`);
const newItems = await res.json();
setItems(prevItems => prevItems.concat(newItems));
setIsFetching(false);
}
};
return (
<div>
<ul ref={containerRef}>
{items.map(item => (
<li key={item.id}>
{item.name}
</li>
))}
</ul>
</div>
);
};
MyComponent.getInitialProps = async () => {
const res = await fetch('http://your-api-url/data');
const data = await res.json();
return { data }
};
export default MyComponent;使用虚拟滚动（Virtual Scrolling）
虚拟滚动（Virtual Scrolling）是一种通过渲染可视窗口内的项目来提升渲染性能的技术。在列表中的许多项目，只有少数需要呈现在当前视口中。使用虚拟滚动技术，我们可以只渲染当前视口中的项目，从而提高性能。
react-virtualized 是一种常见的虚拟滚动实现方法。它能够帮我们实现滚动窗口元素的可视优化，我们可以使用它来渲染大量的数据。
下面是一个使用 react-virtualized 的实现示例代码：
// javascriptcn.com 代码示例
import { useState, useEffect } from 'react';
import { List } from 'react-virtualized';
const MyComponent = ({ data }) => {
const [items, setItems] = useState(data); // 初始化数据
useEffect(() => {
// 处理用户滚动视口事件
const handleScroll = () => {
setItems(prevItems => prevItems);
}
// 添加滚动事件监听
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
}
}, []);
// 渲染每一个 ListItem
const rowRenderer = ({ key, index, style }) => (
<div key={key} style={style}>
{items[index].name}
</div>
);
return (
<List
width={300}
height={600}
rowCount={items.length}
rowHeight={50}
rowRenderer={rowRenderer}
/>
);
};
MyComponent.getInitialProps = async () => {
const res = await fetch('http://your-api-url/data');
const data = await res.json();
return { data }
};
export default MyComponent;总结
通过本文的讲解，我们了解了 Next.js 的服务端预渲染和数据获取能力，以及如何使用 Intersection Observer 和 react-virtualized 来实现高性能的列表显示。希望这些技术能够帮助到大家，在前端开发中更好地处理大数据集合的界面渲染。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654372c37d4982a6ebd38ca1