如何对React自定义hook使用useMemo优化，实现仅视口内元素加载资源

现有实现性能问题根源 #

1. 你的useOnScreen实现最大的问题是在组件顶层创建IntersectionObserver实例，每次组件渲染都会生成新的观察者对象，数百个datacard同时运行就会产生数百个独立的观察者实例，直接导致CPU占用飙升。
2. useEffect依赖数组为空，当ref绑定的DOM元素动态更新时会出现观测失效。
3. 未配置IntersectionObserver的rootMargin参数，无法实现「元素即将进入视口就提前加载」的需求。

优化后的useOnScreen实现 #

基础优化版 #

把观察者实例创建移到useEffect内部，避免重复生成实例，同时支持预加载配置：

import { useState, useEffect, useMemo } from 'react';

export function useOnScreen(ref, options = {}) {
  const [isIntersecting, setIntersecting] = useState(false);

  // 缓存配置项，支持自定义预加载距离
  const observerOptions = useMemo(() => ({
    root: null,
    rootMargin: '200px 0px', // 元素进入视口上下200px就触发，实现提前加载
    threshold: 0.1,
    ...options
  }), [options]);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;

    // 观察者实例仅在依赖变化时创建一次
    const observer = new IntersectionObserver(
      ([entry]) => setIntersecting(entry.isIntersecting),
      observerOptions
    );

    observer.observe(element);

    return () => {
      observer.unobserve(element);
      observer.disconnect();
    };
  }, [ref, observerOptions]);

  return isIntersecting;
}

你的原有调用逻辑不需要做任何修改，替换hook实现即可生效。

极致性能优化版（全局复用观察者实例） #

如果datacard数量超过200个，推荐所有元素共用同一个IntersectionObserver实例，进一步降低性能开销：

import { useState, useEffect } from 'react';

// 全局唯一的观察者实例，所有datacard共用
const globalObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    entry.target._onIntersectCallback?.(entry.isIntersecting);
  });
}, {
  rootMargin: '200px 0px',
  threshold: 0.1
});

export function useOnScreen(ref) {
  const [isIntersecting, setIntersecting] = useState(false);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;

    // 给当前元素绑定自定义回调
    element._onIntersectCallback = (visible) => setIntersecting(visible);
    globalObserver.observe(element);

    return () => {
      globalObserver.unobserve(element);
      delete element._onIntersectCallback;
    };
  }, [ref]);

  return isIntersecting;
}

额外性能优化建议 #

• 优先搭配虚拟滚动库使用，比如react-window，直接只渲染视口附近的15-20个datacard，剩下的DOM完全不生成，性能提升幅度远大于单独做元素懒加载。
• 视频标签默认添加preload="none"属性，只有检测到元素进入视口时再修改为preload="auto"并触发播放，进一步降低网络和CPU开销。
• Datacard组件用React.memo包裹，避免非必要的重渲染。

内容的提问来源于stack exchange，提问作者lowcrawler