深入解析 React 函数式组件中防抖节流失效的内幕：解开执行谜团

2024-02-06 04:03:16

由于函数式组件每次重新渲染时都会释放内部变量，导致防抖和节流函数无法正常工作。为了解决这个问题，我们可以使用类组件或自定义 Hook 来管理防抖和节流函数的生命周期。

使用类组件

将函数式组件转换为类组件，可以确保防抖和节流函数在重新渲染时不会被释放。例如：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0
    };
  }

  handleIncrement = () => {
    this.setState({ count: this.state.count + 1 });
  };

  componentDidMount() {
    this.timeoutId = setTimeout(() => {
      console.log(`Count: ${this.state.count}`);
    }, 1000);
  }

  componentWillUnmount() {
    clearTimeout(this.timeoutId);
  }

  render() {
    return (
      <div>
        <button onClick={this.handleIncrement}>Increment</button>
        <p>Count: {this.state.count}</p>
      </div>
    );
  }
}

使用自定义 Hook

创建一个自定义 Hook 来管理防抖和节流函数的生命周期。例如：

import { useState, useEffect } from 'react';

const useDebounce = (callback, delay) => {
  const [timeoutId, setTimeoutId] = useState(null);

  useEffect(() => {
    if (timeoutId) {
      clearTimeout(timeoutId);
    }

    const newTimeoutId = setTimeout(() => {
      callback();
    }, delay);

    setTimeoutId(newTimeoutId);

    return () => {
      clearTimeout(newTimeoutId);
    };
  }, [callback, delay, timeoutId]);
};

然后，在函数式组件中使用这个自定义 Hook：

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  useDebounce(() => {
    console.log(`Count: ${count}`);
  }, 1000);

  return (
    <div>
      <button onClick={handleIncrement}>Increment</button>
      <p>Count: {count}</p>
    </div>
  );
};