lodash 防止抖，react hook 失效

需求：

• 界面要做图片渲染，并且可以做翻页
• 实现完成之后进行压力测试，疯狂的翻页
• gg。。图片渲染有快有慢，导致前面几张慢的把最后快的给覆盖了

过程：

• 使用 lodash debounce 防抖
• 失败了因为使用的是 react hook，他相当于每次都会创建一个新的 debounce
• 然后防抖就变成了延时
• 那既然是被新建了那就可以使用  ref 来操作，因为ref 是不会被注销掉的

•   const debounceRef = useRef(_.debounce(q => {
      const imageInfo = new Image();
      imageInfo.src = q;
      setImageInfo(imageInfo);
    }, 200)).current;
  
  
   useEffect(() => {
      debounceRef(props.image);
      setImageInfo(new Image());
    }, [props.image])

拓展： 

• 使用 useCallback 也可行

  const delayedQuery = useCallback(_.debounce(q => {
      const imageInfo = new Image();
      imageInfo.src = q;
      setImageInfo(imageInfo);
    }, 200), []);