react
文章平均质量分 80
前端一点就通
做一个能独立思考的人,有话可说,有事可干,歌以咏志。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
ErrorBoundary Card
本文介绍了一个包含错误边界处理的通用卡片组件实现方案。该组件通过React的getDerivedStateFromError API捕获子组件错误,避免白屏问题,提升用户体验。核心代码包括Card组件和ErrorBoundary类组件,后者能捕获同步渲染和生命周期错误,但无法处理异步代码和事件错误。使用示例展示了错误边界的工作效果,并总结了不同错误类型的捕获情况。该方案有助于提升前端项目的稳定性建设,为组件提供优雅降级的兜底展示。原创 2025-11-27 07:30:00 · 561 阅读 · 0 评论 -
IntersectionObserver API实现虚拟列表滚动
的用法,以及如何兼容。如何在React Hook中实现无限滚动。如何正确渲染多达10000个元素的列表。无限下拉加载技术使用户在大量成块的内容面前一直滚动查看。这种方法是在你向下滚动的时候不断加载新内容。当你使用滚动作为发现数据的主要方法时,它可能使你的用户在网页上停留更长时间并提升用户参与度。随着社交媒体的流行,大量的数据被用户消费。无线滚动提供了一个高效的方法让用户浏览海量信息,而不必等待页面的预加载。如何构建一个体验良好的无限滚动,是每个前端无论是项目或面试都会碰到的一个课题。原创 2023-05-07 18:56:45 · 2270 阅读 · 8 评论 -
使用react-pdf预览pdf
在使用构建的react项目中如何实现预览??如果PDF中包含印章该如何使印章展示出来???我项目中使用的版本为5.2.0。4. 显示印章客户在浏览器中使用开源PDF.JS插件预览签署后的PDF文件时会遇到无法显示电子签章的情况,这是因为PDF.JS因无法进行校验电子签名故而默认隐藏了电子签章。如果需要显示电子签章则需要在中找到以下代码并进行注释或者某些版本的PDF.JS需要在pdf.worker.js中找到如下代码并进行注释最后看下效果图......原创 2022-07-09 20:45:39 · 5453 阅读 · 1 评论 -
memo、useMemo、useCallback总结
如何使用memo、useMemo、useCallback,区别是啥原创 2022-06-04 13:53:29 · 885 阅读 · 0 评论 -
关于useEffect的一些思考
最近很烦,好久没静下心来学习了,那就学吧,忘却烦心事,学习使我快乐。(龇牙.png)王国会崛起转而复归尘土,太阳会脱落外层变为白矮星,最后的文明也迟早会结束。我最喜欢React的一点是它统一描述了初始渲染和之后的更新。这降低了你程序的熵。——Dan例1:操作步骤:点击增加counter到3点击一下 “Show alert”点击增加 counter到5并且在定时器回调触发前完成问: count值为几???代码如下:function Counter() { const [cou原创 2020-12-20 23:10:00 · 706 阅读 · 0 评论 -
结合useRef() hook实现按F11进入全屏
最近做react项目碰到个需求:将内容区域全屏现实浏览器为谷歌浏览器核心api:useRef() // 类似于React.createRef()el.webkitRequestFullScreen() // 全屏废话少说,直接上代码:import React, { useRef, useEffect } from 'react'import { Layout, Breadcrumb, message } from 'antd'import style from './index.le原创 2020-12-01 17:16:44 · 554 阅读 · 0 评论 -
react中的三种方式实现祖孙数据共享
最近在学习react的hook,看完useContext后总结一下react中的三种实现祖孙数据共享的方式。这是一个主题换肤的例子,分别用下面三种方式来实现。先上效果图:下面是app.js中的代码:import React from 'react';import './App.css'import PropsContext from './pages/props-context'import ClassContext from './pages/class-context'import U原创 2020-10-17 21:57:55 · 1702 阅读 · 1 评论 -
vue和react对比小结
相同点使用 Virtual DOM提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。不同点运行时性能在 React 应用中,当某个组件的状态发生变化时,它会以该组件为根,重新渲染整个组件子树。如要避免不必要的子组件的重渲染,你需要在所有可能的地方使用 PureComponent,或是手动实现 shouldComponentUpdate 方法。同时你可能会需要使用不可变的数据结构来使得转载 2020-05-16 18:19:14 · 302 阅读 · 0 评论
分享