搜索 - 腾讯云开发者社区-腾讯云

文章/答案/技术大牛

发布

来自专栏前端精读评论
精读《react-intersection-observer 源码》
1 引言 IntersectionObserver 可以轻松判断元素是否可见，在之前的精读《用 React 做按需渲染》中介绍了原生 API 的方法，这次刚好看到其 React 封装版本 react-intersection-observer 2 简介 react-intersection-observer 提供了 Hook useInView 判断元素是否在可视区域内，API 如下： import React from "react"; import { useInView } from "react-intersection-observer"; const Component = () => { const [ref, inView] = INSTANCE_MAP.has(element), "react-intersection-observer: Trying to observe %s, but it's already being 看过 react-intersection-observer 的源码后，你觉得还有可优化的地方吗？欢迎讨论。版权声明：自由转载-非商用-非衍生-保持署名（创意共享 3.0 许可证）
1.4K10编辑于 2022-03-14
来自专栏前端三元同学
懒加载 React 长页面 - 动态渲染组件
('scroll', scrollRenderHandler); }; }, [scrollRenderHandler]); 方法 2：Intersection Observer 使用 react-intersection-observer customize the field names const [ref, inView, entry] = useInView(options); import { useInView } from 'react-intersection-observer IntersectionObserver API 使用教程 - 阮一峰的网络日志: http://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html [7] 精读《react-intersection-observer 8] useCallback、useMemo 分析 & 差别: https://juejin.cn/post/6844904001998176263#heading-7 [9] thebuilder/react-intersection-observer : https://github.com/thebuilder/react-intersection-observer [10] React 如何渲染大数据量的列表?
4.3K40发布于 2021-04-30
来自专栏小鑫同学编程历险记
实操图片流页面体验优化
在组件实际编写中我选择直接 react-intersection-observer 代替原生 API，此模块提供了适用于 Reacrt 中用来监控组件状态的钩子 useInView Hoook API， import { useState } from 'react'; import { useInView } from 'react-intersection-observer'; import Image
72610编辑于 2024-08-21
来自专栏张家辉的树屋
React: Lottie 动画初体验和优化策略
解决了资源懒加载——当图片滚动到可见时才进行加载 import { useInView } from 'react-intersection-observer'; import Lottie from
4.7K40发布于 2021-02-02
来自专栏ThoughtWorks
Web前端性能优化思路
常用工具： react-window react-loadable JS原生，如IntersectionObserver 框架提供，如React.lazy、react-intersection-observer
2K20编辑于 2022-03-04
来自专栏前端达人
2026年React数据获取的第六层：从自己写缓存到用React Query——减少100行代码的秘诀
） // "滚动加载更多"式分页 import { useInfiniteQuery } from'@tanstack/react-query'; import { useInView } from'react-intersection-observer
13810编辑于 2026-03-12

精读《react-intersection-observer 源码》

懒加载 React 长页面 - 动态渲染组件

实操图片流页面体验优化

React: Lottie 动画初体验和优化策略

Web前端性能优化思路

2026年React数据获取的第六层：从自己写缓存到用React Query——减少100行代码的秘诀

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐