• 2024-07-17解决React Warning: Can't perform a React state update on an unmounted component. This is a no-op,
    在写react程序时遇到警告:Warning:Can'tperformaReactstateupdateonanunmountedcomponent.Thisisano-op,butitindicatesamemoryleakinyourapplication.Tofix,cancelallsubscriptionsandasynchronoustasksinauseEffectcleanupfunction.我们
  • 2024-07-17yearrecord——一个类似痕迹墙的React数据展示组件
    介绍一下自己做的一个类似于力扣个人主页提交记录和GitHub主页贡献记录的React组件。下图分别是力扣个人主页提交记录和GitHub个人主页的贡献记录,像这样类似痕迹墙的形式可以比较直观且高效得展示一段时间内得数据记录。然而要从0实现这个功能还是有一些麻烦得,并且该功能可用
  • 2024-07-17创建react项目
    1.创建项目npxcreate-react-appname//1.npxnode的工具命令//2.create-react-app创建react项目的固定写法//3.name项目名称2.目录结构              重点关注src目录,入口文件为src/index.js,也就是运行的起点,导入项目的根组件并
  • 2024-07-16react速成指南
    React18速成–适合有vue基础的同学目录前言脚手架创建react项目jsx重点知识1.在jsx语法中html直接内嵌在函数中并通过return返回2.jsx只能有一个根元素(整合成一个盒子)3.插值4.事件操作React18组件通信与插槽1.为dom组件设置Props2.react组件的PropsReactHooks1.
  • 2024-07-16React+TS前台项目实战(三十)-- 首页构建之基于react-query和性能hook实现全页面数据渲染
    文章目录前言一、效果展示二、首页源码+详细注释说明+技术分析1.页面功能分析2.代码+详细注释总结前言前三篇文章详细介绍了首页的响应式布局,采用关注点分离进行模块拆解,现在只需按需引入模块,页面更加简洁,代码的维护性得到提升。今天将进入首页的收尾阶段,即完成
  • 2024-07-16vite react Typescript 构建一个移动端网页
    使用Vite、React和TypeScript来构建一个移动端网页是一个高效且现代的开发方式。Vite是一个构建工具和开发服务器,它利用原生ES模块导入来提供快速的冷启动和即时模块热更新(HMR)。React是用于构建用户界面的JavaScript库,而TypeScript是JavaScript的一个超集,它添
  • 2024-07-16深入理解 React 的 useSyncExternalStore Hook
    深入理解React的useSyncExternalStoreHook大家好,今天我们来聊聊React18引入的一个新Hook:useSyncExternalStore。这个Hook主要用于与外部存储同步状态,特别是在需要确保状态一致性的场景下非常有用。本文将深入探讨这个Hook的使用场景、工作原理,并通过代码示例来帮助大
  • 2024-07-16深入理解 React 的 Context API:从基础到高级应用
    深入理解React的ContextAPI:从基础到高级应用在React应用中,状态管理一直是一个重要且复杂的话题。虽然Redux和MobX等状态管理库提供了强大的解决方案,但有时候我们只需要一个简单的方式来在组件树中传递数据。React的ContextAPI就是为了解决这个问题而生的。今天,我们
  • 2024-07-16解决 React 中 setInterval 无法更新状态的问题:长按加速的实现
    解决React中setInterval无法更新状态的问题:长按加速的实现在开发React应用时,我们经常会遇到需要定时更新组件状态的场景。setInterval是一个常用的定时器函数,但在React中使用它时,可能会遇到状态无法更新的问题。今天,我们就来深入探讨一下这个问题,并通过一个长按加速的例
  • 2024-07-16深入探讨React表单组件:从基础到高级
    深入探讨React表单组件:从基础到高级大家好!今天我们来聊聊React中的表单组件。表单在前端开发中是非常常见的需求,无论是登录、注册还是数据提交,表单组件都扮演着重要的角色。本文将带你从基础到高级,深入了解React表单组件的使用和优化。基础知识在React中,表单元素(如<input>、<te
  • 2024-07-13浅谈React
    forwardRef和useImperativeHandle的联动使用importReact,{useImperativeHandle,useRef}from"react"import{forwardRef}from"react"constCustomInput=forwardRef((props,ref)=>{constinputRef=useRef<HTMLInputElement>(
  • 2024-07-13React使用ProComponent建立表单和列表
    ProComponentProComponent基于Antd组件库,进一步封装,成为满足企业级开发需求的组件库。其兼容Antd内容的基础上,对表单列表等内容进行完善,在建立表单等需求中能够提供强大的api以及功能集合AntDesign定义了基础的设计规范,对应也提供了大量的基础组件。但是对于中后台类应用,我们
  • 2024-07-13React中使用usePrevious的意义是什么,为啥要用它
    usePrevious钩子exportfunctionusePrevious<T>(value:T):T|undefined{constref=useRef<T>();useEffect(()=>{ref.current=value;},[value]);returnref.current;}注:更多好用的性能钩子网站推荐:https://react-hooks-library.vercel.ap
  • 2024-07-12日常工作中需要避免的9个React坏习惯
    前言React是前端开发领域中最受欢迎的JavaScript库之一,但有时候在编写React应用程序时,可能陷入一些不佳的习惯和错误做法。这些不佳的习惯可能导致性能下降、代码难以维护,以及其他问题。在本文中,我们将探讨日常工作中应该避免的9个坏React习惯,并提供相关示例代码来说明这些问题以
  • 2024-07-12日常工作中需要避免的9个React坏习惯
    前言React是前端开发领域中最受欢迎的JavaScript库之一,但有时候在编写React应用程序时,可能陷入一些不佳的习惯和错误做法。这些不佳的习惯可能导致性能下降、代码难以维护,以及其他问题。在本文中,我们将探讨日常工作中应该避免的9个坏React习惯,并提供相关示例代码来说明这些
  • 2024-07-12react 实现前端发版监测
    先说下前端发版流程1.前端打包输出产物/dist文件2.删除远程服务下打包的旧代码3.将打包参物/dist文件copy到远程服务器目录4.重启服务器问题1在步骤2,3,4中用户访问目标服务器会报JS错误,正常情况打开网页的控制面板会看下报错信息`Failedtofetchdynamicallyimp
  • 2024-07-12适用于react、vue菜单格式化工具函数
    场景在一个动态菜单场景中,你向接口获取树形菜单,但最后拿到的树未能达到你的预期,这个时候就需要手写递归重新处理这颗树适用于react、vue菜单格式化工具函数包含功能1.当前路由是否存在返回按钮判断逻辑:只要存在左侧可点击的菜单都不具备返回按钮,其他则具有返回按钮2.错误
  • 2024-07-12图标组件的封装与管理(React/svg)
    一概要1.1背景最近在项目中使用了很多从iconfont拿到的图标。使用官网的导入方法有些繁琐,也不易管理。于是捣鼓了一下...1.2目的能够像组件一样使用,具有规范性。比如暴露一个type属性,根据不同的type使用不同的主题色。高自由度。可以直接在项目中管理图标,只需要处理从其
  • 2024-07-11界面组件Kendo UI for React 2024 Q2亮点 - 生成式AI集成、设计系统增强
    随着最新的2024年第二季度发布,KendoUIforReact为应用程序开发设定了标准,包括生成式AI集成、增强的设计系统功能和可访问的数据可视化。新的2024年第二季度版本为应用程序界面提供了人工智能(AI)提示,从设计到代码的生产力增强、可访问性改进、一系列新的UI组件等。KendoUI致力
  • 2024-07-11react hooks实现对元素拖拽及鼠标滚轮缩放
    page.jsximport'./index.less';import{useDrag,useZoom}from'./hooks';constDragZoom=()=>{const{handleMouseDown,handleMouseMove,handleMouseUp}=useDrag();const{handleWheel,scale}=useZoom();re
  • 2024-07-10[email protected](53)[email protected](2)- action
    目录1,特点1.1,payload1.2,type1.3,bindActionCreators1,特点是一个平面对象(plain-object)。换句话说,就是通过字面量创建的对象,它的__proto__指向Object.prototype。该对象有2个属性:constaction={ type:'add', payload:3}1.1,payload表示额外需要传递的附
  • 2024-07-10常用的前端框架有哪些?
    常用的前端框架有Bootstrap框架、React框架、Vue框架、Angular框架、Foundation框架等等现在越来越多的前端框架开始出现,这为我们的项目需求带来了极大的方便。本文将为大家详细介绍几种前端框架,有一定的参考作用,希望对大家有所帮助。常用框架介绍:Bootstrap框架Bootstrap是
  • 2024-07-10react或vue中页面多个echarts,只有最后一个能自适应的处理方法
    页面多个echarts时,自适应绑定方式必须是addEventListenerwindow.addEventListener("resize",()=>{myChart.resize();myChart2.resize();})myChart,myChart2是echart实例   
  • 2024-07-09【React】React18 Hooks 之 useContext
    目录useContext1、Provider和useContext2、Provider和Consumer3、Provider嵌套4、React.createContext提供的Provider和class的contextType属性5、读、写Context(1)父组件修改Context(2)子组件修改Context好书推荐useContext官方地址使用Context深度传递数据通
  • 2024-07-09使用react物料
    1.win安装node.js2.安装axios报错,进入到C:\ProgramFiles\nodejs\node_modules\npm目录 成功!安装json-servernpminstalljson-server-g   原文:https://ice.work/docs/guide/about