工作中遇到的好用的React Hooks

1. useEffect填的依赖初始不触发更新

function useDidUpdateEffect(fn, inputs) {
  const didMountRef = useRef(false);
  useEffect(() => {
      if (didMountRef.current) fn();
      else didMountRef.current = true;
  }, inputs);
}
// 使用
useDidUpdateEffect(() => {
  // 页面进入不会触发更新，只有field变更才会触发
}, [field])

2. useEffect多个依赖的时候，state同时变更只触发一次更新

// 依赖内的state同时变更，只触发一次更新
function useMultiEffect(callback, dependencies) {
  const prevDependenciesRef = useRef();
  const timeRef = useRef();

  useEffect(() => {
    if (prevDependenciesRef.current) {
      const now = new Date().getTime();
      const result = now - prevDependenciesRef.current;
      console.log('两次更新相差毫秒:', result);
      // 两次更新相差毫秒小于200，判定为state同时变更，取后一次state变更后执行callback
      if (result < 200) {
        prevDependenciesRef.current = now;
        if (timeRef.current) {
          clearTimeout(timeRef.current);
          timeRef.current = null;
        }
        timeRef.current = setTimeout(() => {
          callback();
        }, 200);
      } else {
        callback();
      }
    } else {
      prevDependenciesRef.current = new Date().getTime();
      timeRef.current = setTimeout(() => {
        callback();
      }, 200);
    }
  }, dependencies);
}
// 使用
useMultiEffect(() => {
  // 同时变更field和field2，只触发最后一次的更新
}, [field, field2])

3. 只在第一次field更新的时候触发一次

function useFirstUpdate(fn, inputs) {
  const countRef = useRef(0);
  useDidUpdateEffect(() => {
    if (!countRef.current) {
      countRef.current++;
      fn()
    }
  }, inputs);
}
// 使用
useFirstUpdate(() => {
  // field变更只触发第一次更新
}, [field])