input file 清空 react_React 搜索优化：防抖、缓存、LRU

像素摇摆

是一个分享 JavaScript、框架技术、面试问题、前端趋势等有价值文章的公众号

最近要主导 react 项目重构优化等相关的工作，由于有好长时间没碰 React 了，今天索性把一个基于关键字搜索的 demo 做一下简单优化，在此记录一下。

主要从三个方面进行优化处理：

• 减少事件的触发频率 - 对关键字键入进行 debounce 处理

减少 HTTP 请求 - 对重复的 HTTP 请求进行缓存拦截缓存淘汰策略 - 使用 LRU 优化缓存

减少事件的触发频率 - 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