Question

以下是我试图理解相交观察器的示例示例：

function Test(props) {
  const loadingRef = useRef(null);
  useEffect(() => {
    let options = {
      root: null,
      rootMargin: '0px',
      threshold: 1.0
    }
    let observer = new IntersectionObserver(handleIntersection, options);
    observer.observe(loadingRef.current)
  }, [])

  function handleIntersection(x, y) {
    console.log("Why this triggers on component mount?");
  }
  return (
    <div>
      <div style={{width: '100%', height: '100px', background: '#c4c4c4', borderBottom: '1px solid #f4f4f4'}}></div>
      <div style={{width: '100%', height: '100px', background: '#c4c4c4', borderBottom: '1px solid #f4f4f4'}}></div>
      <div style={{width: '100%', height: '100px', background: '#c4c4c4', borderBottom: '1px solid #f4f4f4'}}></div>
      <div style={{width: '100%', height: '100px', background: '#c4c4c4', borderBottom: '1px solid #f4f4f4'}}></div>
      <div style={{width: '100%', height: '100px', background: '#c4c4c4', borderBottom: '1px solid #f4f4f4'}}></div>
      <div style={{width: '100%', height: '100px', background: '#c4c4c4', borderBottom: '1px solid #f4f4f4'}}></div>
      <div style={{width: '100%', height: '100px', background: '#c4c4c4', borderBottom: '1px solid #f4f4f4'}}></div>
      <div style={{width: '100%', height: '100px', background: '#c4c4c4', borderBottom: '1px solid #f4f4f4'}}></div>
      <div style={{width: '100%', height: '100px', background: '#c4c4c4', borderBottom: '1px solid #f4f4f4'}}></div>
      <div style={{width: '100%', height: '100px', background: '#c4c4c4', borderBottom: '1px solid #f4f4f4'}}></div>
      <div style={{width: '100%', height: '100px', background: '#c4c4c4', borderBottom: '1px solid #f4f4f4'}}></div>
      <div ref={loadingRef}></div>
    </div>
  );
}

即使目标元素与源元素不相交，我也无法理解为什么这会在组件安装时触发。

Answer 1

您的useEffect有第二个参数：

useEffect(() => {
  let options = {
    root: null,
    rootMargin: '0px',
    threshold: 1.0
  }
  let observer = new IntersectionObserver(handleIntersection, options);
  observer.observe(loadingRef.current)
}, [])

   ^^
   ||

These here.

这意味着它在组件安装时运行。 reactjs.org上的Hooks FAQ的一部分提到了这一点。

为什么相交观察器在组件安装上触发？

1 个答案: