标签:#React
16 篇文章
Material Design 图标库搜索
Material Design 图标库搜索
Material Design 图标库搜索方法,包含谷歌官方字体库和 MUI 官方文档的搜索链接。
常用图标库:React Icons 和 Oh Vue Icons
常用图标库:React Icons 和 Oh Vue Icons
本文介绍两个常用的图标库:react-icons (适用于 React) 和 oh-vue-icons (适用于 Vue),它们提供了丰富的图标资源,方便开发者在项目中使用。
UI 组件库调研、React State、React Hooks、画板和 React Query
UI 组件库调研、React State、React Hooks、画板和 React Query
本文调研了多个 UI 组件库,例如 shadcn;探讨了 React State 管理方案 Redux 和 zustand;介绍了 React Hooks 库 ahooks;推荐了一个非常酷的画板库 tldraw;最后分析了 React Query 库及其应用。
React 中使用定时器和性能优化
React 中使用定时器和性能优化
本文探讨在 React 中使用定时器的最佳实践,包括如何利用 `requestAnimationFrame`、`performance.now()` 等 API 提升性能,并结合 `useMemo`, `useRef`, `useCallback`, `useEffect` 等 Hook 进行优化,避免常见的性能问题。文章分析了示例代码,并对 `requestAnimationFrame` 和 `setTimeout` 的区别进行了讲解。
JS Vue React 路由处理机制
JS Vue React 路由处理机制
本文探讨了 JavaScript、Vue 和 React 如何处理路由,并解释了 Nginx 配置中 `try_files` 指令的作用,以及如何通过它实现单页应用的路由机制。
在 React/NextJs 中使用 PDF.js 预览和转换 PDF 文件为图片
在 React/NextJs 中使用 PDF.js 预览和转换 PDF 文件为图片
本文介绍如何在 React 和 Next.js 项目中使用 pdf.js 库来预览 PDF 文件,并将其转换为图片。文章包含了详细的代码示例和配置步骤,涵盖了客户端渲染和服务端渲染两种场景。
NextJS 中 'window is not defined' 错误的解决方法
NextJS 中 'window is not defined' 错误的解决方法
Next.js 项目中使用 print-js 库时遇到'window is not defined'错误的解决方法,包括使用 useEffect hook、检查环境和动态导入等方法,以及作者使用 import() 方法的解决思路。
Nginx 前端配置与二级路由详解
Nginx 前端配置与二级路由详解
本文详细介绍了 Nginx 前端配置,包括 Vue 和 React 项目的打包部署,以及如何配置二级路由和处理不同访问路径下的代理转发问题,并深入探讨了 `alias`和`root`指令的区别以及`proxy_pass`中带`/`和不带`/` 的区别。
React 渲染 HTML 字符串
React 渲染 HTML 字符串
React 组件输出 HTML 字符串,如何直接渲染而不是显示为字符串?使用 dangerouslySetInnerHTML 方法解决,但需注意其安全性。
React Hooks 中父组件调用子组件方法
React Hooks 中父组件调用子组件方法
本文介绍了如何在 React Hooks 中使用 useRef、useImperativeHandle 和 forwardRef 三个方法,实现父组件主动调用子组件方法的功能。文章包含了子组件和父组件的代码示例,并解释了各个方法的作用。
React 阻止事件冒泡
React 阻止事件冒泡
本文介绍了在 React 中阻止事件冒泡的几种方法,并提供了具体的代码示例。
React 性能优化之 React.memo
React 性能优化之 React.memo
React 性能优化技巧:使用 React.memo 提升组件性能。文章介绍了 React.memo 的使用方法,以及如何通过自定义比较函数来优化性能,避免不必要的组件重新渲染,从而提升应用的流畅性。
React 性能优化之 useCallback
React 性能优化之 useCallback
本文深入探讨 React 中的 useCallback hook,解释其作用、用法以及如何避免过度使用。通过代码示例和详细说明,帮助开发者理解 useCallback 如何提升 React 应用的性能,并避免常见的误区。文章还分析了 useCallback 与组件重新渲染之间的关系,以及在何种场景下使用 useCallback 最为有效。
React useState 更新数组无效的问题及解决方法
React useState 更新数组无效的问题及解决方法
使用 React 的 useState 更新数组时,如果直接修改数组引用,React 可能无法检测到变化,导致页面不更新。本文解释了原因并提供了有效的解决方法,例如使用展开运算符 ([...array]) 创建新的数组副本。
简易的 React Table 组件
简易的 React Table 组件
一个简易的 React Table 组件,实现了固定表头和固定列的功能,并使用了 react-list 组件实现无限加载。文章包含代码分析和运行效果演示。
React 组件父子传值
React 组件父子传值
React 组件间的父子传值方法详解,包括 Class 组件和 Function 组件两种方式,并附带代码示例。文章讲解如何通过 props 在父组件和子组件之间传递数据。