如何在React中实现滚动到元素末尾时触发组件加载（无需jQuery）

嘿，我来帮你搞定这个滚动加载组件的需求！首先咱们先聊聊你现有代码里的几个小问题：

• componentWillUnMount 拼写错啦，应该是 componentWillUnmount（最后一个m小写），不然移除scroll监听会失效，导致内存泄漏
• 直接监听window的scroll事件会频繁触发，性能不太好，而且你现在的判断逻辑（scrollTop === offsetTop）其实不太准确，很难精准触发加载时机

针对你的需求——滚动到组件/div末尾时才加载对应组件，我推荐用原生的 Intersection Observer API，这玩意儿是浏览器专门为元素交叉检测设计的，性能比手动监听scroll事件好太多，而且完全不用jQuery，完美符合你的要求。

实现思路 #

咱们可以给每个需要懒加载的组件套一个容器，用Intersection Observer监听这个容器，当容器的底部进入视口（或者说当用户滚动到这个容器所在区域的末尾附近时），就触发组件的加载。

下面是修改后的完整代码，我把你提到的7-8个组件（比如CreateMore、Services等）都改成了懒加载模式：

import React, { Component } from 'react';
// 导入你的组件
import Home from './Home';
import Explainers from './Explainers';
import Video from './Video';
import CreateMore from './CreateMore';
import Services from './Services';
import Animated from './Animated';
import Clients from './Clients';
import Footer from './Footer';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      isExplainers: false,
      isOurVideo: false,
      // 给每个需要懒加载的组件添加状态
      showCreateMore: false,
      showServices: false,
      showAnimated: false,
      showClients: false
    };
    // 存储Observer实例，方便卸载时清理
    this.observers = [];
  }

  componentDidMount() {
    // 初始化各个需要懒加载的元素的Observer
    this.setupObserver('createMoreContainer', () => this.setState({ showCreateMore: true }));
    this.setupObserver('servicesContainer', () => this.setState({ showServices: true }));
    this.setupObserver('animatedContainer', () => this.setState({ showAnimated: true }));
    this.setupObserver('clientsContainer', () => this.setState({ showClients: true }));

    // 处理explainers和video的加载逻辑（同样用Observer）
    this.setupObserver('explainers', () => this.setState({ isExplainers: true }));
    this.setupObserver('video', () => this.setState({ isOurVideo: true }));
  }

  componentWillUnmount() {
    // 清理所有Observer实例，避免内存泄漏
    this.observers.forEach(observer => observer.disconnect());
  }

  // 通用的Observer设置方法
  setupObserver(elementId, callback) {
    const element = document.getElementById(elementId);
    if (!element) return;

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          // 当元素的底部进入视口（或者说元素完全进入视口后）触发
          // 可以调整threshold或rootMargin来修改触发时机
          if (entry.isIntersecting) {
            callback();
            // 触发后停止监听这个元素，避免重复触发
            observer.unobserve(entry.target);
          }
        });
      },
      {
        // rootMargin可以调整触发的提前量，比如设置为"0px 0px -100px 0px"表示元素底部距离视口底部100px时就触发
        rootMargin: "0px 0px 0px 0px",
        // threshold设为1表示元素完全进入视口时触发；设为0.5表示一半进入时触发
        threshold: 1.0
      }
    );

    observer.observe(element);
    this.observers.push(observer);
  }

  render() {
    const explainersClass = this.state.isExplainers ? "explainerAfter" : "explainer";
    const ourVideoClass = this.state.isOurVideo ? "videoContainerAfter" : "videoContainer";

    return (
      <div className="App">
        <Home id="home" />
        <div id="explainers" className={explainersClass}>
          <Explainers />
        </div>
        <div id="video" className={ourVideoClass}>
          <Video />
        </div>
        {/* 懒加载CreateMore */}
        <div id="createMoreContainer">
          {this.state.showCreateMore && <CreateMore />}
        </div>
        {/* 懒加载Services */}
        <div id="servicesContainer">
          {this.state.showServices && <Services />}
        </div>
        {/* 懒加载Animated */}
        <div id="animatedContainer">
          {this.state.showAnimated && <Animated />}
        </div>
        {/* 懒加载Clients */}
        <div id="clientsContainer">
          {this.state.showClients && <Clients />}
        </div>
        <Footer />
      </div>
    );
  }
}

export default App;

关键说明 #

1. Intersection Observer配置：

   • rootMargin：可以设置触发加载的提前量，比如你想让组件在进入视口前100px就加载，就设为"0px 0px -100px 0px"
   • threshold：控制元素进入视口的比例时触发，1.0表示元素完全进入视口时触发，0表示元素刚进入视口就触发，你可以根据需求调整

2. 性能优化：

   • 每个元素触发加载后，我们调用unobserve停止监听，避免重复触发
   • 在componentWillUnmount里断开所有Observer，防止内存泄漏

3. 适配你的原有逻辑：

   • 我把你原来的isExplainers和isOurVideo的触发逻辑也改成了用Observer，替换掉了原来的scroll事件监听，这样更高效

如果想更灵活，还可以把这个懒加载逻辑封装成一个高阶组件（HOC）或者自定义Hook（比如用React Hooks的话），这样所有需要懒加载的组件都能复用这个逻辑，代码会更整洁。

内容的提问来源于stack exchange，提问作者hruday kumar reddy