在 typescript React 中使用带有事件参数的闭包-解网

问：

我正在尝试使用带有打字稿 React 的闭包来实现去抖动函数。问题是，每次我尝试传递事件参数时，它似乎都对函数进行了新的引用。所以我认为这与传球和执行有关......谁能帮我？_handleScroll

这是行不通的

  const _handleScroll = (e: UIEvent<HTMLElement>): (() => void) => {
    e.stopPropagation();
    let prev = Date.now();
    const debounce = 500; // 500ms
    let counter = 0;

    return () => {
      const now = Date.now();
      if (prev - now > debounce) {
        prev = now;
        setScrollHeight(e.currentTarget.scrollTop);
      }
      ++counter;
      console.log("@@@", { now, prev, counter }); // result: counter: 1, 1, 1,...
    };
  };

...

    <div
      className="h-full overflow-y-auto"
      onScroll={(e) => _handleScroll(e)()}
    >

...

但这有效


  const _handleScroll = (): (() => void) => {
    // e.stopPropagation();
    let prev = Date.now();
    const debounce = 500; // 500ms
    let counter = 0;

    return () => {
      const now = Date.now();
      if (prev - now > debounce) {
        prev = now;
        // setScrollHeight(e.currentTarget.scrollTop);
      }
      ++counter;
      console.log("@@@", { now, prev, counter }); // result: counter: 1, 2, 3,...
    };
  };
...

<div className="h-full overflow-y-auto" onScroll={_handleScroll()}>

...

JavaScript ReactJS TypeScript 闭包

在传递句柄滚动时提供的第二个代码块中，就像传递该函数的返回值一样。但是在你传递的第一个代码块中，你实际上是在传递该函数的引用。每次你的组件重新渲染时，传递给 div 的引用都会改变，如果你想防止 use useCallback 钩子，它类似于 useEffect，你把你的函数包装在其中，并将你的依赖项传递到 [] 中，它基本上会缓存你的函数引用，并且只在你的依赖项发生变化时才改变它希望这会有所帮助onScroll={_handleScroll()}onScroll={_handleScroll}

let prev = useRef<number>();
  let height = useRef<number>(0);
  const _handleScroll = () => {
    const now = Date.now();
    const debounce = 500; // 500ms

    if (!prev.current) {
      ++height.current;
      prev.current = Date.now();
      setScrollHeight(e.currentTarget.scrollTop);
    }
    if (!!prev.current && now - prev.current > debounce) {
      prev.current = Date.now();
      setScrollHeight(e.currentTarget.scrollTop);
      ++height.current;
    }
  };

<div className="h-full overflow-y-auto" onScroll={_handleScroll}>

_handleScroll将在每次滚动时激活，但状态更新了 500 毫秒。

在 typescript React 中使用带有事件参数的闭包

Using closure with event arguments in typescript React

评论

评论

评论