一、防抖技术

防抖是一种编程技术，用于限制某个函数在短时间内被频繁调用的次数。具体来说，当一个函数被触发时，防抖会确保该函数在指定的延迟时间内只执行一次。如果在延迟时间内再次触发该函数，计时器会被重置，重新开始计算延迟时间。

这在处理高频率事件（如窗口调整大小、输入框输入、拖动操作等）时非常有用，可以避免因频繁触发事件而导致的性能问题。

Lodash

Lodash 是一个流行的 JavaScript 工具库，提供了许多实用的函数，包括 debounce。以下是如何使用 Lodash 的 debounce 来优化你的前端代码。

二、使用Lodash

2.1 安装 Lodash

如果你的项目中还没有安装 Lodash，可以使用 npm 或 yarn 进行安装：

npm install lodash
pnpm install lodash

或者

yarn add lodash

2.2 引入debounce

在需要使用防抖功能的组件中引入 debounce：

import { debounce } from 'lodash';

2.3 创建防抖函数

使用 debounce 包装你需要限制执行频率的函数。例如，在你的 CanvasComponent 中：

const saveGraphicsData = debounce((data) => {
  // 这里执行保存图形数据的逻辑
  console.log('Saving graphics data:', data);
  // 例如：调用API保存数据
}, 200); // 200毫秒的延迟

解释：

• saveGraphicsData 是经过防抖处理的函数。
• 当 saveGraphicsData 被调用时，它不会立即执行，而是等待 200 毫秒。
• 如果在这 200 毫秒内再次调用 saveGraphicsData，计时器会被重置，重新开始等待 200 毫秒。
• 只有当 200 毫秒内没有新的调用时，saveGraphicsData 才会真正执行。

2.4 绑定事件处理

在你的事件处理函数中调用防抖函数：

const handleChange = (event) => {
  const data = event.target.value; // 根据实际情况获取数据
  saveGraphicsData(data);
};

解释：

• 每当 onChange 事件被触发时，handleChange 函数会被调用。
• handleChange 调用 saveGraphicsData，但由于 saveGraphicsData 是防抖函数，实际的保存操作会被延迟执行。

2.5 清理防抖函数

为了避免内存泄漏，需要在组件卸载时取消防抖函数的计时器：

useEffect(() => {
  return () => {
    saveGraphicsData.cancel();
  };
}, []);

解释：

• useEffect 的返回函数会在组件卸载时执行。
• saveGraphicsData.cancel() 会取消任何未执行的防抖计时器，确保不会有残留的回调函数在组件卸载后执行。

2.6 完整示例

import { useEffect, useRef } from 'react';
import { debounce } from 'lodash';

const CanvasComponent = () => {
  const canvasRef = useRef(null);
  const saveGraphicsData = useRef(null);

  // 创建防抖函数
  saveGraphicsData.current = debounce((data) => {
    console.log('Saving graphics data:', data);
    // 实际保存数据的逻辑
  }, 200);

  const handleChange = (event) => {
    const data = event.target.value; // 根据实际情况获取数据
    saveGraphicsData.current(data);
  };

  useEffect(() => {
    return () => {
      // 清理防抖函数
      saveGraphicsData.current.cancel();
    };
  }, []);

  return (
    <canvas ref={canvasRef} onChange={handleChange}>
      {/* Canvas 内容 */}
    </canvas>
  );
};

export default CanvasComponent;

三、ES语法问题

Lodash是一个比较古早的开源库，当时的代码规范和当前已经有所不同，因此在使用了es的项目中引入lodash会报错。

解决方案：使用lodash-es

pnpm install lodash-es @types/lodash-es