像素摇摆
是一个分享 JavaScript、框架技术、面试问题、前端趋势等有价值文章的公众号
最近要主导 react 项目重构优化等相关的工作,由于有好长时间没碰 React 了,今天索性把一个基于关键字搜索的 demo 做一下简单优化,在此记录一下。
主要从三个方面进行优化处理:
- 减少事件的触发频率 - 对关键字键入进行 debounce 处理
减少事件的触发频率 - debounce
debounce 旨在时间段内控制事件只在最后一次操作触发。
debounce 原理:是维护一个计时器,在规定的 delay 时间后触发函数,在 delay 时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发。
下面是 react 中 debounce 优化的代码:
...handler = e => { let val = e.target.value; if(val) { this.search(val); } this.setState(() => ({ value: e.target.value }))}debounce = (fn, delay) => { let timer = null; return function(event) { timer && clearTimeout(timer); ev