react使用lodash的 debounce防抖 或 throttle节流 失效

写在前面：简要说明一下，在react中，不论是useEffect监听某个值，还是表单中的onChange，它们触发后都会使需要执行的函数被重新创建，并未被缓存。下面从3个方面说明。

解决方式：使用useCallback包裹，使函数得到缓存。

1.函数无缓存，每次都会被重新创建，a不会累加

  let a = 1;
  const test3 = () => {
    a++;
    console.log(a, "b");  //2、2、2...
  }
  
  useEffect(() => {
    test();
  }, [value])

2.函数有缓存，a会累加

  let a = 1;
  const test = useCallback(() => {
    a++; 
    console.log(a, "a"); //2、3、4...
  }, [])
  
  useEffect(() => {
    test();
  }, [value])

3.函数需缓存，lodash的debounce才会生效

  import debounce from 'lodash/debounce';
  ...
  
  const test = useCallback(debounce(function () {
    console.log("后置防抖");  // 2秒延迟结束后只调用一次
  }, 2000, {
    leading: false,
    trailing: true
  }), [])
  
  useEffect(() => {
    test();
  }, [value])