关于 防抖和节流 结合useRef useCallBack

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

　　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做防抖