React TypeScript中内联使用Lodash Debounce处理按钮点击是否为不良实践？

首先得指出你代码里的一个小问题：() => saveForm只是返回了saveForm函数的引用，并没有实际调用它，应该改成() => saveForm()，否则点击按钮不会执行保存逻辑。

回到你的核心问题：直接在按钮onClick里内联使用debounce确实属于不良实践，原因很明确：

• React组件每次渲染（比如状态更新、父组件传参变化时），都会重新执行组件函数内的代码，包括JSX部分。这意味着每次渲染都会创建一个全新的debounce函数实例。
• 防抖的核心是靠同一个函数实例维护的定时器来实现的，如果每次点击用的都是新的防抖实例，之前的定时器会被丢弃，根本起不到“避免重复点击”的作用——连续点击时，每个新的防抖函数都会重新计时，等于防抖完全失效。

正确的实现方式 #

要让防抖生效，必须保证每次点击时用的是同一个debounce函数实例，通常有两种可行方案：

1. 用useCallback缓存防抖函数（函数组件） #

在组件内部用useCallback包裹debounce函数，将需要防抖的业务函数设为依赖项，这样只有当依赖项变化时才会重新创建防抖实例：

import { debounce } from 'lodash';
import { useCallback } from 'react';

function MyFormComponent() {
  const saveForm = () => {
    // 这里编写表单保存逻辑
    console.log('表单已保存');
  };

  // 缓存防抖函数实例
  const debouncedSave = useCallback(
    debounce(() => saveForm(), 1500, { maxWait: 2000 }),
    [saveForm]
  );

  return (
    <Button onClick={debouncedSave}>SAVE</Button>
  );
}

2. 将防抖函数定义在组件外部（无内部依赖时） #

如果你的saveForm逻辑不依赖组件内部的状态、props等变量，可以直接把防抖函数定义在组件外部，这样整个组件生命周期内只会创建一次实例：

import { debounce } from 'lodash';

// 组件外部定义防抖函数
const debouncedSave = debounce(() => {
  // 表单保存逻辑
  console.log('表单已保存');
}, 1500, { maxWait: 2000 });

function MyFormComponent() {
  return (
    <Button onClick={debouncedSave}>SAVE</Button>
  );
}

类组件的实现方式 #

如果是类组件，通常在constructor里初始化防抖函数实例，或者用类字段的方式定义，避免每次render创建新实例：

import { debounce } from 'lodash';
import React from 'react';

class MyFormComponent extends React.Component {
  saveForm = () => {
    // 表单保存逻辑
    console.log('表单已保存');
  };

  // 初始化防抖实例
  debouncedSave = debounce(() => this.saveForm(), 1500, { maxWait: 2000 });

  render() {
    return <Button onClick={this.debouncedSave}>SAVE</Button>;
  }
}

内容的提问来源于stack exchange，提问作者user2128