数据多且不分页，前端渲染dom如何优化性能

左&耳

已于 2024-05-14 13:58:14 修改

阅读量342

点赞数 1

文章标签： javascript 前端 react.js

于 2024-05-07 10:38:05 首次发布

本文链接：https://blog.csdn.net/weixin_43925630/article/details/138522042

版权

js判断子节点有没有进入父节点可视区域

在React项目中，你可以使用useEffect钩子和IntersectionObserver API来实现这个功能。下面是一个例子：

首先，创建一个子组件 ChildComponent：

import React, { useEffect, useRef } from 'react';

const ChildComponent = () => {
  const childRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          console.log('子节点进入可视区域');
        } else {
          console.log('子节点离开可视区域');
        }
      });
    });

    observer.observe(childRef.current);

    // 清除观察器
    return () => {
      observer.disconnect();
    };
  }, []);

  return <div ref={childRef}>子节点内容</div>;
};

export default ChildComponent;

然后，父组件中使用ChildComponent组件：

import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  return (
    <div style={{ height: '300px', overflowY: 'scroll' }}>
      {Array.from({ length: 10 }, (_, index) => (
        <ChildComponent key={index} />
      ))}
    </div>
  );
};

export default ParentComponent;

在这个例子中，ChildComponent组件在可视区域内进入或离开时会在控制台输出相应的消息。这个组件会在useEffect钩子中创建一个IntersectionObserver实例，监听子节点是否进入父节点的可视区域。

请确保适当地调整代码以适应你的实际情况，比如根据你的数据渲染方式，可能需要传递一些参数给子组件或者动态地计算子节点的数量。