React中滚动事件绑定_.throttle及修复bind绑定报错问题

嘿，我来帮你搞定这两个React滚动节流的问题！

在React中给滚动事件绑定lodash的_.throttle，核心是创建一个稳定的节流函数实例，避免每次渲染重复创建，同时确保函数的this指向正确，还要记得在组件卸载时清理监听和节流定时器，防止内存泄漏。下面分组件类型给你具体实现：

类组件实现方式 #

方式一：构造函数初始化（推荐） #

这种方式只会在组件实例化时创建一次节流函数，性能更优：

import _ from 'lodash';

class ScrollHandler extends React.Component {
  constructor(props) {
    super(props);
    // 先把目标函数的this绑定到组件实例
    this.handleScroll = this.handleScroll.bind(this);
    // 创建节流后的函数，保存为实例属性
    this.throttledScroll = _.throttle(this.handleScroll, 100);
  }

  handleScroll() {
    // 你的滚动处理逻辑，比如获取滚动位置
    const scrollTop = window.scrollY;
    console.log('当前滚动位置：', scrollTop);
  }

  componentDidMount() {
    // 给window添加滚动监听，使用节流后的函数
    window.addEventListener('scroll', this.throttledScroll);
  }

  componentWillUnmount() {
    // 移除监听，必须用同一个函数实例
    window.removeEventListener('scroll', this.throttledScroll);
    // 取消lodash节流的定时器，避免内存泄漏
    this.throttledScroll.cancel();
  }

  render() {
    return <div className="scroll-container">滚动测试区域</div>;
  }
}

方式二：组件挂载时创建节流函数 #

如果不想在构造函数里处理，也可以在componentDidMount中直接创建：

class ScrollHandler extends React.Component {
  handleScroll() {
    const scrollTop = window.scrollY;
    console.log('当前滚动位置：', scrollTop);
  }

  componentDidMount() {
    // 直接创建节流函数，用箭头函数确保this指向组件实例
    this.throttledScroll = _.throttle(() => this.handleScroll(), 100);
    window.addEventListener('scroll', this.throttledScroll);
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.throttledScroll);
    this.throttledScroll.cancel();
  }

  render() {
    return <div className="scroll-container">滚动测试区域</div>;
  }
}

函数组件实现方式 #

用React Hooks的useCallback缓存节流函数，避免每次渲染重新创建：

import _ from 'lodash';
import { useCallback, useEffect } from 'react';

function ScrollHandler() {
  // 用useCallback缓存节流函数，依赖为空数组时只会创建一次
  const throttledScroll = useCallback(
    _.throttle(() => {
      const scrollTop = window.scrollY;
      console.log('当前滚动位置：', scrollTop);
    }, 100),
    []
  );

  useEffect(() => {
    window.addEventListener('scroll', throttledScroll);
    // 清理函数：组件卸载时移除监听并取消节流
    return () => {
      window.removeEventListener('scroll', throttledScroll);
      throttledScroll.cancel();
    };
  }, [throttledScroll]);

  return <div className="scroll-container">滚动测试区域</div>;
}

先帮你分析下错误原因：
你写的throttle()函数没有返回节流后的函数，导致window.addEventListener绑定的是undefined，滚动触发时自然会抛出Cannot read property 'bind' of undefined的错误；另外你在_.throttle参数里做this.getElementPosition = this.getElementPosition.bind(this)的赋值操作，写法混乱且没必要——bind会返回新函数，但你没把节流后的函数返回出去，最终this.throttle就是undefined。

下面给你针对你的代码修改的正确方案：

import _ from 'lodash';

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    // 先绑定this到组件实例
    this.getElementPosition = this.getElementPosition.bind(this);
    // 创建节流后的函数并保存为实例属性
    this.throttledGetPosition = _.throttle(this.getElementPosition, 100);
  }

  getElementPosition() {
    // 你的元素位置获取逻辑
    console.log('获取元素位置成功');
  }

  componentDidMount() {
    // 添加滚动监听，使用节流后的函数
    window.addEventListener('scroll', this.throttledGetPosition);
  }

  componentWillUnmount() {
    // 移除监听，必须用同一个函数实例
    window.removeEventListener('scroll', this.throttledGetPosition);
    // 取消节流定时器，防止内存泄漏
    this.throttledGetPosition.cancel();
  }

  render() {
    return <div>你的组件内容</div>;
  }
}

如果你不想在构造函数里处理，也可以简化成这样：

componentDidMount() {
  // 直接创建节流函数并绑定this
  this.throttledGetPosition = _.throttle(this.getElementPosition.bind(this), 100);
  window.addEventListener('scroll', this.throttledGetPosition);
}

这样就能完美解决你遇到的错误啦！

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