react 使用lodash做防抖与节流

监听边输入边搜索：@input
敲回车搜索 @keyup.enter.native=""
点击按钮搜索 @click

搜索性能优化：主要利用防抖和节流

防抖和节流：主要目的是为了降低高频事件触发，减少dom操作或请求次数，提升性能

通常高频事件：onscroll,onresize,keyup/keydown,mousemove

防抖：在固定时间内，如果有事件触发，则会再延长固定时间，直到固定时间内没有触发事件再做处理 例如：电梯和屏保、上传过文件前端做假存储提示上传成功
反复触发执行最后一次

节流：指定一个固定时间，无论是事件触发与，只要到了固定时间，都会触发

第三方函数工具库：lodash
安装： npm i lodash
引入：import _ from ‘lodash’

我这里实在react中使用的，配合hooks，使用react第5天，之前一直用vue5年，新项目选型react,因为是外企项目，再有业务逻辑相对复杂，用vue3.0,不如用react了，Hooks更简单。

业务批量上传文件，前端先做存储并显示在页面上文件名，做上传成功与失败或错误的提示；

因为需要遍历数组所以会触发多个提示，这里只需要提示一次，方案采用防抖

数据结构如下：

  const dataList: any = [
    {
      title: '读取数据',
      buttonText: '批量上传',
      id: 0,
      list: [
        {
          id: 0,
          title: '000 Version表（至少包含之后24个月数据）',
          surface: '',
        },
        {
          id: 2,
          title: '实际销量表（本财年初至下个财年）',
          surface: '',
        },
        {
          id: 3,
          title: '入库记录表（本财年初至今的数据）',
          surface: '', // 0 可以上传 1表示成功无需再上传
        },
        {
          id: 4,
          title: 'Rolling Forecast（本财年和下个财年）',
          surface: '', // 0 可以上传 1表示成功无需再上传
        },
        {
          id: 5,
          title: '当前财年Allocation表',
          surface: '', // 0 可以上传 1表示成功无需再上传
        },
        {
          id: 6,
          title: '下个财年Allocation表',
          surface: '', // 0 可以上传 1表示成功无需再上传
        },
        {
          id: 7,
          title: '当前财年财务Demand数据表',
          surface: '', // 0 可以上传 1表示成功无需再上传
        },
        {
          id: 8,
          title: '下个财年财务Demand数据表',
          surface: '', // 0 可以上传 1表示成功无需再上传
        },
        {
          id: 9,
          title: '上个财年底库存结余数据表',
          surface: '', // 0 可以上传 1表示成功无需再上传
        },
        {
          id: 10,
          title: '上月底库存结余数据表',
          surface: '', // 0 可以上传 1表示成功无需再上传
        },
      ],
    },
    {
      title: '待写入文件',
      buttonText: '开始计算',
      id: 1,
      list: [
        {
          id: 0,
          title: 'BO Projection',
          surface: '', // 0 可以上传 1表示成功无需再上传
        },
      ],
    },
    {
      title: '输入结果',
      buttonText: '一键下载',
      id: 2,
      list: [
        {
          id: 0,
          title: '"正常情况下"输入结果',
          situationList: [
            {
              id: 0,
              title: '中间过程表',
              surface: '正常情况下的中间过程表.xlsx',
            },
            {
              id: 1,
              title: 'BO Projection',
              surface: '正常情况下的BO Projection.xlsx',
            },
          ],
        },
        {
          id: 1,
          title: '"非正常情况下"输入结果',
          situationList: [
            {
              id: 0,
              title: '中间过程表',
              surface: '非正常情况下的中间过程表.xlsx',
            },
            {
              id: 1,
              title: 'BO Projection',
              surface: '非正常情况下的BO Projection.xlsx',
            },
          ],
        },
      ],
    },
  ];
  const [dataFormList, setDataFormList] = useState(dataList);

只要逻辑代码。

  const [didInit, setDidInit] = useState(false);
  // 批量 upload的CustomerUpload方法;dataFormList在upload的beforeUpload方法中赋值的这做展示
  const onBatchCustomerUpload = () => {
    if (!listFileData || !dataFormList) return false;
    if (didInit) return false; //执行一次
    setDidInit(true);
    // 回显页面
    dataFormList.map((item) => {
      if (!item.list) return false;
      item.list.map((i) => {
        listFileData.map((j) => {
          if (
            (i.title.toLowerCase().includes(j.split('-')[0].toLowerCase()) ||
              i.title.toLowerCase().includes(j.split('.')[0].toLowerCase())) &&
            item.id == 0
          ) {
            i.surface = j;
            getSuggestion('批量上传成功', true);
          } else if (
            i.title.toLowerCase().includes(j.split('-')[0].toLowerCase()) ||
            i.title.toLowerCase().includes(j.split('.')[0].toLowerCase())
          ) {
            getSuggestion('部分上传成功,请上传相对应表', false);
          }
        });
      });
    });
    setDataFormList(dataFormList); // 重新赋值dataFormList
    setTimeout(() => {
      setDidInit(false);
      listFileData = [];
    }, 300);
  };

防抖  useCallback作用防止debounce失效

useCallback的作用也显而易见，咱们用通俗的话来说就是缓存了这个函数，避免被重复创建

在遇到类似场景，React中使用防抖并且失效的时候，可以用useCallback来包装

// 防抖  反复触发执行最后一次 //使用useCallback防止debounce失效
  const debounce = _.debounce;
  const getSuggestion = useCallback(
    debounce((val: string, type: boolean) => {
      type ? message.success(val) : message.warning(val);
    }, 300),
    [],
  );

 节流

  const throttle = _.throttle;
  const getSuggestion = 
    throttle((val: string, type: boolean) => {
      type ? message.success(val) : message.warning(val);
    }, 300);