利用IntersectionObserver实现动态渲染的示例详解
作者：萌鱼
IntersectionObserver诞生已经有几年了，所以它的兼容性目前已经达到可以使用的程度了。本文主要介绍了如何利用IntersectionObserver实现动态渲染，感兴趣的可以了解一下
前言
开发表格时，希望支持可视后的动态加载。在查找资料做了一些尝试后，最终使用IntersectionObserver，相对方便地实现了该功能
IntersectionObserver诞生已经有几年了，所以它的兼容性目前已经达到可以使用的程度了。具体兼容程度以及详细API可参考CDN
实现
懒加载组件
核心就是利用了IntersectionObserver的能力，封装了LazyContainer组件，该组件的children，只有在视口中可见时，才会真正渲染
export const LazyContainer = (props) => {
const { children } = props;
const $ref = useRef<HTMLDivElement>(null);
const [isReady, setReady] = useState(false);
useEffect(() => {
const observer = new IntersectionObserver((entries) => {
// 一个observer可以监听多个元素，本例中只有一个
entries.forEach((entry) => {
// isIntersecting：目标元素与观察者元素（一般为视口）是否相交
if (!isReady && entry.isIntersecting) {
setReady(true);
// 首次加载完后，便停止监听
observer.disconnect();
}
});
});
observer.observe($ref.current as Element);
}, []);
return <div ref={$ref}>{isReady ? children : null}</div>;
};长列表组件示意
简洁实现一个长列表，测试LazyContainer组件
export const LongList = (props) => {
const { loop = 1, children } = props;
return (
<ul>
{Array.from({ length: loop }).map((x, i) => {
return (
<li style={{ height: '200px', marginBottom: '20px' }}>
{React.cloneElement(children, { key: i, num: i })}
</li>
);
})}
</ul>
);
};测试
在页面上测试一下该功能
<LongList loop={3}>
<LazyContainer num={1}>
{/* 利用img加载做一个测试 */}
<img src="图片地址"></img>
</LazyContainer>
</LongList>在chrome network中开启slow 3G，然后让LongList中的元素一个接一个出现，就可以明显看到图片是一个接一个进行加载的。
到此这篇关于利用IntersectionObserver实现动态渲染的示例详解的文章就介绍到这了,更多相关IntersectionObserver动态渲染内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！