揭秘 React Hooks 中的防抖和节流：终极指南

2024-01-28 20:20:21

在现代网络应用程序中，用户体验是至关重要的。流畅且响应迅速的交互可以极大地提高满意度，而滞后的按钮和意外的请求则会导致沮丧和放弃。React Hooks 中的防抖和节流技术为解决这些问题提供了优雅的解决方案，让我们深入探讨其魔力吧！

防抖：为用户提供流畅的体验

想象一下这种情况：用户疯狂地点击一个按钮，期望即时响应。如果没有防抖，浏览器将向服务器发送大量不必要的请求，淹没服务器并导致延迟。防抖通过在一定时间内限制函数调用次数来解决此问题。

在 React 中，可以使用 useEffect Hook 实现防抖。在 useEffect 中，传入一个回调函数和一个依赖数组。回调函数定义要执行的操作，而依赖数组指定在哪些状态或属性更新时触发该回调。

import { useEffect, useState } from "react";

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

  useEffect(() => {
    const timeout = setTimeout(() => {
      // 防抖后的操作
      console.log(`当前计数：${count}`);
    }, 500);

    // 清除超时以防止内存泄漏
    return () => clearTimeout(timeout);
  }, [count]);

  return (
    <>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>计数</button>
      <div>当前计数：{count}</div>
    </>
  );
};

export default MyComponent;

在上面的示例中，useEffect 钩子使用 setTimeout 函数创建一个 500 毫秒的计时器。当 count 状态发生变化时，计时器将重置，有效地防止在计时器到期前调用回调函数。这为用户提供了一种流畅的体验，因为按钮只能每 500 毫秒响应一次。

节流：节省资源，提高性能

与防抖不同，节流在指定的时间间隔内只允许函数执行一次。这对于需要在用户滚动或调整窗口大小时持续执行的任务非常有用。

在 React 中，可以使用 useCallback 和 useMemo Hooks 实现节流。useCallback 用于创建在依赖项更改时不会重新创建的回调函数，而 useMemo 用于创建在依赖项更改时不会重新计算的值。

import { useCallback, useMemo } from "react";

const MyComponent = () => {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  const handleResize = useCallback(() => {
    // 节流后的操作
    setWindowWidth(window.innerWidth);
  }, []);

  // 仅在 windowWidth 更改时重新计算 widthBreakpoints 值
  const widthBreakpoints = useMemo(() => {
    return calculateWidthBreakpoints(windowWidth);
  }, [windowWidth]);

  useEffect(() => {
    window.addEventListener("resize", handleResize);

    return () => window.removeEventListener("resize", handleResize);
  }, [handleResize]);

  return (
    <>
      <div>当前窗口宽度：{windowWidth}</div>
      <div>宽度断点：{JSON.stringify(widthBreakpoints)}</div>
    </>
  );
};

export default MyComponent;

在上面的示例中，useCallback 钩子用于创建 handleResize 回调函数，该函数仅在组件卸载时重新创建。useMemo 钩子用于创建 widthBreakpoints 值，该值仅在 windowWidth 更改时重新计算。这种组合确保 handleResize 函数只在特定的时间间隔（例如每 100 毫秒）内调用一次，从而节省资源并提高应用程序性能。