关于前端:关于-防抖和节流-结合useRef-useCallBack

46次阅读

共计 1409 个字符，预计需要花费 4 分钟才能阅读完成。

先看看防抖和节流场景
防抖的利用场景：

1. 搜寻框实时搜寻：在搜寻框中输出关键词时，防抖能够提早申请发送，只在用户输出实现或者进展一段时间后才触发理论的搜寻申请，防止频繁的网络申请。

2. 窗口大小调整：当用户调整浏览器窗口大小时，窗口大小变动事件会间断触发，应用防抖能够确保只在用户实现调整后再执行相应的响应逻辑，以防止过多的布局计算。

节流的利用场景：

1. 页面滚动加载：在有限滚动的页面中，滚动事件会频繁触发，应用节流能够控制数据加载的频率，避免短时间内屡次加载数据，进步页面加载性能。

2. 按钮防反复点击：当用户点击按钮执行某个操作时，应用节流能够确保按钮在肯定工夫内只能触发一次，避免用户反复点击造成误操作。

总结：

防抖实用于须要期待用户操作实现或者进展后才进行相应解决的状况，如搜寻框实时搜寻和窗口大小调整 。 节流则实用于须要限度事件触发频率的状况，如页面滚动加载和按钮点击。

useRef 使用场景：

1、操作曾经挂载到 DOM 的节点：例如，当须要设置元素的焦点时，能够应用 useRef 来获取以后 DOM 节点，而后对其进行操作。例如，官网例子中，inputEl.current.focus();会使得输入框取得焦点。

2、保留任何可变值：useRef能够保留任何可变值，相似于在类组件中应用实例字段。例如，在 React function component 中实现含糊搜寻时，能够应用 useRef 来保留用户输出的数据，以便在输出过程中动静更新下拉列表中的数据项。

3、函数节流：在须要频繁触发事件的场景中，应用 useRef 配合函数节流能够防止频繁的申请，进步用户体验并缩小对后盾服务的压力。例如，在用户输出过程中，能够应用 useRef 来保留输出值，而后应用函数节流来限度在短时间内更新下拉列表的次数。

useCallBack
把内联回调函数及依赖项数组作为参数传入 useCallback，它将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项扭转时才会更新。当你把回调函数传递给通过优化的并应用援用相等性去防止非必要渲染（例如 shouldComponentUpdate）的子组件时，它将十分有用

所以：

const updateRef = useRef(null);
updateRef.current = () => {const list = options.concat([inputValue]);
  setOptions(list);
};

const updateOptions = useCallback(_.throttle(() => {updateRef.current();
  }, 1000),
  []);

如果封装成 hook

// 通用的自定义 hooks
export default function useThrottle(func, wait, options) {const funcRef = useRef(null);
  funcRef.current = func;

  return useCallback(
    _.throttle(() => {funcRef.current();
      },
      wait,
      options
    ),
    []);
}

// 调用办法
const updateOptions = useThrottle(() => {const list = options.concat([inputValue]);
    setOptions(list);
  }, 1000);

参考文章：useRef 做防抖

正文完