react 使用lodash做防抖和节流

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

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

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

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

1.  
   防抖：在固定时间内，如果有事件触发，则会再延长固定时间，直到固定时间内没有触发事件再做处理 例如：电梯和屏保、上传过文件前端做假存储提示上传成功
2.  
   反复触发执行最后一次
3.  
    
4.  
   节流：指定一个固定时间，无论是事件触发与，只要到了固定时间，都会触发

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

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

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

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

数据结构如下：

1.  
   const dataList: any = [
2.  
   {
3.  
   title: '读取数据',
4.  
   buttonText: '批量上传',
5.  
   id: 0,
6.  
   list: [
7.  
   {
8.  
   id: 0,
9.  
   title: '000 Version表（至少包含之后24个月数据）',
10.  
    surface: '',
11.  
    },
12.  
    {
13.  
    id: 2,
14.  
    title: '实际销量表（本财年初至下个财年）',
15.  
    surface: '',
16.  
    },
17.  
    {
18.  
    id: 3,
19.  
    title: '入库记录表（本财年初至今的数据）',
20.  
    surface: '', // 0 可以上传 1表示成功无需再上传
21.  
    },
22.  
    {
23.  
    id: 4,
24.  
    title: 'Rolling Forecast（本财年和下个财年）',
25.  
    surface: '', // 0 可以上传 1表示成功无需再上传
26.  
    },
27.  
    {
28.  
    id: 5,
29.  
    title: '当前财年Allocation表',
30.  
    surface: '', // 0 可以上传 1表示成功无需再上传
31.  
    },
32.  
    {
33.  
    id: 6,
34.  
    title: '下个财年Allocation表',
35.  
    surface: '', // 0 可以上传 1表示成功无需再上传
36.  
    },
37.  
    {
38.  
    id: 7,
39.  
    title: '当前财年财务Demand数据表',
40.  
    surface: '', // 0 可以上传 1表示成功无需再上传
41.  
    },
42.  
    {
43.  
    id: 8,
44.  
    title: '下个财年财务Demand数据表',
45.  
    surface: '', // 0 可以上传 1表示成功无需再上传
46.  
    },
47.  
    {
48.  
    id: 9,
49.  
    title: '上个财年底库存结余数据表',
50.  
    surface: '', // 0 可以上传 1表示成功无需再上传
51.  
    },
52.  
    {
53.  
    id: 10,
54.  
    title: '上月底库存结余数据表',
55.  
    surface: '', // 0 可以上传 1表示成功无需再上传
56.  
    },
57.  
    ],
58.  
    },
59.  
    {
60.  
    title: '待写入文件',
61.  
    buttonText: '开始计算',
62.  
    id: 1,
63.  
    list: [
64.  
    {
65.  
    id: 0,
66.  
    title: 'BO Projection',
67.  
    surface: '', // 0 可以上传 1表示成功无需再上传
68.  
    },
69.  
    ],
70.  
    },
71.  
    {
72.  
    title: '输入结果',
73.  
    buttonText: '一键下载',
74.  
    id: 2,
75.  
    list: [
76.  
    {
77.  
    id: 0,
78.  
    title: '"正常情况下"输入结果',
79.  
    situationList: [
80.  
    {
81.  
    id: 0,
82.  
    title: '中间过程表',
83.  
    surface: '正常情况下的中间过程表.xlsx',
84.  
    },
85.  
    {
86.  
    id: 1,
87.  
    title: 'BO Projection',
88.  
    surface: '正常情况下的BO Projection.xlsx',
89.  
    },
90.  
    ],
91.  
    },
92.  
    {
93.  
    id: 1,
94.  
    title: '"非正常情况下"输入结果',
95.  
    situationList: [
96.  
    {
97.  
    id: 0,
98.  
    title: '中间过程表',
99.  
    surface: '非正常情况下的中间过程表.xlsx',
100.  
     },
101.  
     {
102.  
     id: 1,
103.  
     title: 'BO Projection',
104.  
     surface: '非正常情况下的BO Projection.xlsx',
105.  
     },
106.  
     ],
107.  
     },
108.  
     ],
109.  
     },
110.  
     ];
111.  
     const [dataFormList, setDataFormList] = useState(dataList);

只要逻辑代码。

1.  
   const [didInit, setDidInit] = useState<boolean>(false);
2.  
   // 批量 upload的CustomerUpload方法;dataFormList在upload的beforeUpload方法中赋值的这做展示
3.  
   const onBatchCustomerUpload = () => {
4.  
   if (!listFileData || !dataFormList) return false;
5.  
   if (didInit) return false; //执行一次
6.  
   setDidInit(true);
7.  
   // 回显页面
8.  
   dataFormList.map((item) => {
9.  
   if (!item.list) return false;
10.  
    item.list.map((i) => {
11.  
    listFileData.map((j) => {
12.  
    if (
13.  
    (i.title.toLowerCase().includes(j.split('-')[0].toLowerCase()) ||
14.  
    i.title.toLowerCase().includes(j.split('.')[0].toLowerCase())) &&
15.  
    item.id == 0
16.  
    ) {
17.  
    i.surface = j;
18.  
    getSuggestion('批量上传成功', true);
19.  
    } else if (
20.  
    i.title.toLowerCase().includes(j.split('-')[0].toLowerCase()) ||
21.  
    i.title.toLowerCase().includes(j.split('.')[0].toLowerCase())
22.  
    ) {
23.  
    getSuggestion('部分上传成功,请上传相对应表', false);
24.  
    }
25.  
    });
26.  
    });
27.  
    });
28.  
    setDataFormList(dataFormList); // 重新赋值dataFormList
29.  
    setTimeout(() => {
30.  
    setDidInit(false);
31.  
    listFileData = [];
32.  
    }, 300);
33.  
    };

防抖  useCallback作用防止debounce失效

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

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

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

 节流

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

这篇好文章是转载于：学新通技术网