React组件的曝光检测利用 IntersectionObserver API 的hook hook 使用判断组件元素是

hook

export default function useOnScreen(ref) {

  const [isIntersecting, setIntersecting] = useState(false)

  const observer = new IntersectionObserver(
    ([entry]) => setIntersecting(entry.isIntersecting)
  )

  useEffect(() => {
    observer.observe(ref.current)
    // 当组件卸载时，关闭observer
    return () => { observer.disconnect() }
  }, [])

  return isIntersecting
}

使用

const MyComponent = () => {
  
  const ref = useRef()
  const isVisible = useOnScreen(ref)
  
  return <div ref={ref}>{isVisible && `我已进入可视区域`}</div>
}