如何用react-intersection-observer实现组件仅可见时渲染且渲染后不隐藏（无额外div）

核心思路 #

• 借助useInView钩子监听元素是否进入视口
• 维护一个状态标记，当元素首次进入视口后将状态设为true，后续保持渲染状态
• 直接将观察用的ref绑定到目标组件/原生元素上，避免额外容器div

实现步骤与代码示例 #

1. 原生HTML元素场景 #

如果目标是div、img这类原生元素，直接绑定ref即可：

import { useInView } from 'react-intersection-observer';
import { useState } from 'react';

function LazyRenderContent() {
  const [isRendered, setIsRendered] = useState(false);
  // threshold设为0，元素刚进入视口就触发；triggerOnce确保只监听一次
  const { ref, inView } = useInView({
    threshold: 0,
    triggerOnce: true,
  });

  // 元素进入视口后，标记为已渲染
  if (inView && !isRendered) {
    setIsRendered(true);
  }

  return isRendered ? (
    <div ref={ref}>
      我是进入视口才渲染的内容，之后不会消失
    </div>
  ) : null;
}

2. 自定义组件场景 #

如果是自定义组件，需要先让组件支持接收ref（用forwardRef包裹）：

import { forwardRef } from 'react';

// 用forwardRef让自定义组件能接收外部传入的ref
const CustomCard = forwardRef((props, ref) => {
  return (
    <div ref={ref} className="card-style">
      {props.children}
    </div>
  );
});

然后在懒渲染逻辑中直接使用：

import { useInView } from 'react-intersection-observer';
import { useState } from 'react';
import CustomCard from './CustomCard';

function LazyCustomComponent() {
  const [isRendered, setIsRendered] = useState(false);
  const { ref, inView } = useInView({
    threshold: 0,
    triggerOnce: true,
  });

  if (inView && !isRendered) {
    setIsRendered(true);
  }

  return isRendered ? (
    <CustomCard ref={ref}>
      自定义组件的延迟渲染内容，无额外div
    </CustomCard>
  ) : null;
}

关键细节 #

• triggerOnce: true：避免元素离开视口时重复触发监听，节省性能开销
• 直接绑定ref：无需额外容器包裹目标内容，保持DOM结构简洁
• 状态isRendered：一旦切换为true，组件会持续渲染，不会再隐藏

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