React常用hook的優化useEffect淺比較

先說說react原版的useEffect使用起來不便的地方

useEffect(
  function() {
    // effect操作
  },
  ['a', 'b', { name: 'c' }]
);

這裡的effect每次更新都會執行，因為第三個參數一直是不等的，{name: 'c'} !== {name: 'c'}

第二是在deps依賴很多的時候是真的麻煩

下麵貼出改進版useEffect

import { useRef, useEffect } from 'react';
import _ from 'lodash';
export function useDeepCompareEffect<T>(fn, deps: T) {
  // 使用一個數字信號控制是否渲染，簡化 react 的計算，也便於調試
  let renderRef = useRef<number | any>(0);
  let depsRef = useRef<T>(deps);
  if (!_.isEqual(deps, depsRef.current)) {
    renderRef.current++;
  }
  depsRef.current = deps;
  return useEffect(fn, [renderRef.current]);
}

在使用的時候什麼都不用做，只需要把參數傳進來就行。

避免了之前的淺比較的缺陷，性能上有降低

deps稍微控制一下量，此處的性能不是大問題

寫起來爽就完事了，要啥自行車。

useDeepCompareEffect(function() {
  // effect操作
}, 'a');
useDeepCompareEffect(
  function() {
    // effect操作
  },
  { name: 'c' }
);
useDeepCompareEffect(function() {
  // effect操作
}, 4567);