useCustomCompareEffect

修改後的 useEffect，它接受一個比較函數，用於比較依賴項而不是引用相等性

Usage

即時編輯器

function Demo() {
  const [person, setPerson] = useState({ name: "bob", id: 1 });
  const [count, setCount] = useState(0);
  useCustomCompareEffect(
    () => {
      setCount(c => c + 1);
    },
    [person],
    (prevDeps, nextDeps) => prevDeps[0].id === nextDeps[0].id,
  );

  return (
    <div>
      <button
        onClick={() => {
          setPerson({ name: "joey", id: 1 });
        }}
      >
        更改人名
      </button>
      <button
        onClick={() => {
          setPerson({ name: "bob", id: 2 });
        }}
      >
        更改人員ID
      </button>
      <p>useCustomCompareEffect 深度比較：{count}</p>
    </div>
  );
};

結果

useCustomCompareEffect 深度比較：1

API

useCustomCompareEffect

Returns

void

Arguments

參數名	描述	類型	預設值
effect	副作用函数	React.EffectCallback (必填)	-
deps	依赖列表	TDeps (必填)	-
depsEqual	依赖比较函数	DepsEqualFnType<TDeps> (必填)	-

DepsEqualFnType

export type DepsEqualFnType<TDeps extends DependencyList> = (prevDeps: TDeps, nextDeps: TDeps) => boolean;