滚动加载，前端工程师的必备技能

2024-01-18 00:39:35

什么是滚动加载？

滚动加载是一种在用户滚动页面时动态加载内容的技术。它可以提高页面的加载速度和用户体验。

传统上，当用户访问一个页面时，整个页面都会被加载。这可能会导致页面加载缓慢，尤其是当页面上有大量内容时。滚动加载则可以避免这种情况。它只会在用户滚动页面时加载用户当前看到的内容。这可以大大提高页面的加载速度，并改善用户体验。

如何使用React实现滚动加载？

在React中，可以使用几种方法来实现滚动加载。一种方法是使用React的钩子（Hooks）。钩子是React 16.8版本引入的一个新特性，它允许我们在不使用类的情况下编写函数组件。

以下是如何使用钩子实现滚动加载的示例代码：

import { useEffect, useState } from "react";

const ScrollingList = () => {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchMoreItems = () => {
      setLoading(true);
      setTimeout(() => {
        setItems([...items, ...[1, 2, 3, 4, 5]]);
        setLoading(false);
      }, 1000);
    };

    window.addEventListener("scroll", () => {
      if (window.innerHeight + document.documentElement.scrollTop >= document.documentElement.offsetHeight && !loading) {
        fetchMoreItems();
      }
    });

    return () => {
      window.removeEventListener("scroll", () => {});
    };
  }, [items, loading]);

  return (
    <ul>
      {items.map((item) => (
        <li key={item}>{item}</li>
      ))}
      {loading && <li>Loading...</li>}
    </ul>
  );
};

export default ScrollingList;

这段代码首先使用useState钩子创建了两个状态变量：items和loading。items状态变量存储了当前已加载的项目，loading状态变量表示是否正在加载数据。

然后，useEffect钩子用于添加一个滚动事件监听器。当用户滚动页面时，滚动事件监听器会触发fetchMoreItems函数。fetchMoreItems函数会将loading状态变量设置为true，然后使用setTimeout函数模拟一个异步数据请求。1秒后，fetchMoreItems函数会将items状态变量更新为包含新项目的数组，并将loading状态变量设置为false。

最后，ScrollingList组件返回一个无序列表（<ul>），其中包含了当前已加载的项目。如果正在加载数据，则还会显示一个“正在加载...”的项目。