React 中如何实现列表视图的加载更多功能-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，列表视图是非常常见的一种UI组件。而当我们需要加载大量的数据时，为确保用户体验，通常是采用“分页”或“加载更多”的方式来实现异步加载数据。本文主要介绍在React中如何实现列表视图的加载更多功能。

基本思路

我们要实现一个“加载更多”的功能，需要用到以下几个元素：

一个包含所有数据的数组
一个指示当前页数的变量
一个指示每页数据数量的变量
一个用于展示列表的组件
一个用于触发加载更多的按钮，或者当滚动到底部时自动加载的逻辑

当用户点击“加载更多”按钮时，我们需要根据当前页数和每页数据数量计算当前需要展示的数据，然后将其添加到列表中。随之，页数变量需要加1。

实现步骤

准备工作

我们首先需要准备好一个包含所有数据的数组。为了简化例子，我们这里使用一个数字数组：

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9];

然后定义我们需要的两个变量：currentPage和pageSize，初始值分别设为1和3：

const [currentPage, setCurrentPage] = useState(1);
const pageSize = 3;

渲染列表组件

接下来，我们需要定义一个用于展示数据的组件。在这个例子中，我们将其命名为List：

// javascriptcn.com 代码示例
function List(props) {
  return (
    <div>
      {props.data.map((item) => (
        <div key={item}>Item {item}</div>
      ))}
    </div>
  );
}

这个组件接收一个名为data的prop，它包含了当前页需要展示的数据。

渲染当前页的数据

我们的下一步是渲染当前页的数据。我们使用Array.slice方法根据页数和页大小来计算该页需要展示的数据，并作为prop传递给List组件：

const visibleData = data.slice(0, currentPage * pageSize);
return <List data={visibleData} />;

添加“加载更多”按钮

接着，我们需要添加一个“加载更多”按钮。当按钮被点击时，我们需要根据当前页数和页大小来计算需要展示的下一页数据，并将其追加到当前展示的数据后面：

// javascriptcn.com 代码示例
function loadMore() {
  const nextPage = currentPage + 1;
  const newData = data.slice(currentPage * pageSize, nextPage * pageSize);
  setCurrentPage(nextPage);
  setVisibleData([...visibleData, ...newData]);
}
return (
  <div>
    <List data={visibleData} />
    <button onClick={loadMore}>Load more</button>
  </div>
);

自动加载

除了添加按钮之外，我们还可以在列表底部检测窗口是否滚动到底部，如果是则自动加载下一页数据。这个实现比较简单，只需要在List组件的底部添加一个空的元素，并在componentDidMount和componentDidUpdate生命周期中判断是否需要加载下一页：

// javascriptcn.com 代码示例
class List extends React.Component {
  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
  }

  componentDidUpdate(prevProps) {
    if (this.props.data.length !== prevProps.data.length) {
      window.addEventListener('scroll', this.handleScroll);
    }
  }

  handleScroll = () => {
    const { innerHeight } = window;
    const { scrollTop, offsetHeight } = document.documentElement;
    if (innerHeight + scrollTop + 1 >= offsetHeight) {
      this.props.onLoadMore();
    }
  };

  render() {
    return (
      <div>
        {this.props.data.map((item) => (
          <div key={item}>Item {item}</div>
        ))}
        <div ref={this.props.reference} />
      </div>
    );
  }
}

然后我们需要给List组件传递一个reference prop，它将指向我们在底部添加的空元素：

// javascriptcn.com 代码示例
const listRef = useRef(null);
function loadMore() {
  // ...
}
return (
  <div>
    <List
      data={visibleData}
      reference={listRef}
      onLoadMore={loadMore}
    />
  </div>
);

就这样，我们便完成了React中列表视图的加载更多功能。以上是一个基本的实现，可以根据具体情况进行改造和优化。

总结

在React中实现列表视图的加载更多功能与其他UI库并无太大区别，需要借助于组件状态和生命周期等原生特性实现。本文介绍了一种基本的方案供大家参考，在实际项目中可以根据具体需求进行改造和优化。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6534bf9f7d4982a6eb9e5533