在React Native中使用Lodash节流失效问题求助

这个问题我之前踩过坑，核心原因是你没有缓存节流函数的实例，导致每次触发点击时都在创建新的节流函数，自然起不到限流作用。咱们一步步拆解你的两种写法问题：

你的两种写法为什么失效？ #

写法一：直接在onPress中调用throttle #

<TouchableHighlight onPress={throttle(this.onPressHandler,5000,{leading:true, trailing:false})}>

如果这段代码写在组件的render方法（函数组件则是每次渲染时），那么每次组件重新渲染，都会生成一个全新的节流函数实例。这些新实例之间完全独立，没有共享节流的状态（比如是否已经触发过、距离上次调用的时间），所以连续点击时，每个新的节流函数都会认为自己是第一次被调用，直接执行onPressHandler。

写法二：在箭头函数中创建节流函数 #

<TouchableHighlight onPress={()=>throttle(this.onPressHandler,5000,{leading:true, trailing:false})}>

这种写法的问题更明显：每次点击时，箭头函数都会新建一个节流函数，但你其实没有执行这个节流函数（就算改成() => throttle(...)()也没用）。退一步说，就算你执行了，每次点击生成的都是新的节流函数实例，同样无法共享限流状态，连续点击还是会多次触发onPressHandler。

正确的解决方法 #

核心思路是：在组件初始化时创建一次节流函数，然后复用这个实例，让它能记住之前的调用状态。

类组件写法 #

import React from 'react';
import { TouchableHighlight } from 'react-native';
import throttle from 'lodash.throttle';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // 在初始化阶段创建节流函数实例，整个生命周期复用
    this.throttledOnPress = throttle(this.onPressHandler, 5000, { 
      leading: true, 
      trailing: false 
    });
  }

  onPressHandler = () => {
    console.log('处理点击逻辑');
    // 你的业务代码
  };

  render() {
    return (
      <TouchableHighlight onPress={this.throttledOnPress}>
        {/* 你的子组件 */}
      </TouchableHighlight>
    );
  }

  // 组件卸载时清理节流函数，避免内存泄漏
  componentWillUnmount() {
    this.throttledOnPress.cancel();
  }
}

函数组件写法（React Hooks） #

用useCallback缓存节流函数，确保每次渲染都返回同一个实例：

import React, { useCallback, useEffect } from 'react';
import { TouchableHighlight } from 'react-native';
import throttle from 'lodash.throttle';

function MyComponent() {
  const onPressHandler = () => {
    console.log('处理点击逻辑');
    // 你的业务代码
  };

  // 使用useCallback缓存节流函数，依赖项为空数组，确保只创建一次
  const throttledOnPress = useCallback(
    throttle(onPressHandler, 5000, { leading: true, trailing: false }),
    []
  );

  // 组件卸载时清理节流函数
  useEffect(() => {
    return () => throttledOnPress.cancel();
  }, [throttledOnPress]);

  return (
    <TouchableHighlight onPress={throttledOnPress}>
      {/* 你的子组件 */}
    </TouchableHighlight>
  );
}

关键提醒 #

别忘了在组件卸载时调用节流函数的cancel()方法，这样可以清除lodash内部的定时器，避免不必要的内存泄漏。

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