react优化

本博主认为,是时候出一期,react的优化了。

首先,你可能会有这样的一个疑问,为什么要优化呢?

为了提高你的性能,优化用户的体验,试想一下,如果用户打开了一个网站,用户竟然等了两秒钟,这个网站才显示出内容,用户下次还会不会再打开你这个网站?(一些h的不要在这里提,感谢)所以为了留住你这个网站的用户,一定要进行优化

react的优化方向

本博主认为,react使用的jsx jsx可以认为是js的一个超集,因此react的优化还是要围绕这个js来进行展开(这里不会具体讲解),结合react框架还有好多优化,就比如尽量避免使用index作为key因为如果用index作为这个key的话,一旦数据进行增删改的话,就有可能导致key值的变化。这个index就会变动,如能够不使用useeffect带来的类似生命周期的副作用就不要使用 useEffect 使用usecallback 来监听函数 比如处理异步函数是都会使用 usecallback使用useMemo缓存结果 遇到一些不怎么改变状态的组件使用memo行组件包裹起来 一定在离开组件前 将页面中出现的监听 定时订阅销毁 比如我在项目写echars 数据渲染功能时,一定会在useEffect 中调用echars 的dispose或者clear方法清除图形数据 还有一些骨架屏 开机动画 图片懒加载 动态列表 还有路由懒加载 使用路由懒加载 就是使用suspens/lazy的时候在lazy那个函数里还可以给import异步导入方法添加注释 设置这个组件是预加载还是 单独打包

以上就是一些常见的reacrt的优化

相关推荐
大圣编程7 分钟前
Python中continue语句的用法是什么?
开发语言·前端·python
yuhaiqiang8 分钟前
随手 vibecoding 的浏览器插件已经 6000 多次下载,聊聊他的产品设计
前端·后端·面试
之歆1 小时前
Vue商品详情与放大镜组件
前端·javascript·vue.js
再吃一根胡萝卜1 小时前
如何把小米 MiMo 接入 CodeBuddy,打造私有 Agent
前端
负责的蛋挞3 小时前
异步HttpModule的实现方式
java·服务器·前端
YFF菲菲兔4 小时前
其他 Hooks 解析
react.js
丹宇码农5 小时前
把 HLS 字幕玩出花:zwPlayer 如何让 M3U8 视频支持全文搜索、翻译与码率自适应
前端·javascript·音视频·hls·视频播放器
2501_943782355 小时前
【共创季稿事节】猜数字游戏:二分法思维与交互式反馈
前端·游戏·microsoft·harmonyos·鸿蒙·鸿蒙系统
GV191rLvq6 小时前
基于Socket实现的最简单的Web服务器【ASP.NET原理分析】
服务器·前端·asp.net