mingjun97的blog

日常填坑的各种记录

React踩坑记录2 - this.setState()频繁刷新导致性能下降

前言

这两天在做软件安全实验,实验要求写一个嗅探器+arp欺骗的工具。老师要求是用winpcap来实现。偷懒的我决定用python3scapy模块来实现相关的功能。介于老师有要求写出漂亮的界面,所以最后决定使用flask+semantic-ui+socketio+react来实现套件功能。

踩坑实况

背景描述

由于后台使用了scapy进行抓包,使用prn参数的回调功能结合socketio来实现包的广播(这里有另外一个坑),但是如果短时间内抓到大量的包的话,会导致前端频繁的进行刷新,进而导致页面假死,用户使用体验极差。(CPU占用长时间100%)

解决方案

考虑到之前不知道在哪看到的 this.setState() 函数会使得页面进行一次刷新。而直接通过this.state.xxx.push() 不会使得页面刷新,所以这里就将socketio接收到消息的事件通过函数将内容push到数组里面。

然后设定一个计时器,定时使用this.setState()更新一个为用到的数据,来实现页面的刷新。这样能同时兼顾用户可用性和数据包接收。(CPU占用稳定在40%左右,不得不承认,基于web的抓包展示工具还是有些瓶颈在其中)。

后来发现单个页面过长也会导致性能下降(一次在一个页面内渲染好几万个包),所以又引入了分页机制。最后整体来看总算稳定了。

Comments