一、防抖技术
防抖是一种编程技术，用于限制某个函数在短时间内被频繁调用的次数。具体来说，当一个函数被触发时，防抖会确保该函数在指定的延迟时间内只执行一次。如果在延迟时间内再次触发该函数，计时器会被重置，重新开始计算延迟时间。
这在处理高频率事件（如窗口调整大小、输入框输入、拖动操作等）时非常有用，可以避免因频繁触发事件而导致的性能问题。
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
