react 实现触底加载

可以使用 Intersection Observer API 来实现触底加载，具体实现可以参考以下代码：

import React, { useState, useEffect, useRef } from 'react';

function App() {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const observer = useRef();

  useEffect(() => {
    setLoading(true);
    fetchData();
  }, [page]);

  useEffect(() => {
    const options = {
      root: null,
      rootMargin: '0px',
      threshold: 1.0
    };

    observer.current = new IntersectionObserver(handleObserver, options);
    if (loading) {
      observer.current.observe(document.querySelector('#bottom'));
    }
  }, [loading]);

  const handleObserver = (entities) => {
    const target = entities[0];
    if (target.isIntersecting) {
      setPage((page) => page + 1);
      setLoading(true);
    }
  };

  const fetchData = async () => {
    const response = await fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=10`);
    const newData = await response.json();
    setData((data) => [...data, ...newData]);
    setLoading(false);
  };

  return (
    <div>
      {data.map((item) => (
        <div key={item.id}>
          <h3>{item.title}</h3>
          <p>{item.body}</p>
        </div>
      ))}
      {loading && <p>Loading...</p>}
      <div id="bottom"></div>
    </div>
  );
}

export default App;

这里使用了 Intersection Observer API 来监听底部元素是否进入视口，如果进入视口则触发加载更多数据的操作。同时使用了 useState 和 useEffect 来管理数据和页面状态。