React useEffect 对象依赖避免不必要渲染的四种方式

1. 使用对象的具体 Value

function useGetProducts(filters: Record<string, string>) {
  useEffect(() => {
    syncFilters(filters);
  }, [...Object.values(filters)]);
}

会收到 lint 警告，因此必须禁用它才能提交代码。

2. 手动传递每个值

function useGetProducts(filters: Record<string, string>) {
  const { brand, color } = filters;
 
  useEffect(() => {
    syncFilters({ brand, color });
  }, [brand, color]);
}

繁琐、麻烦

3. 第三方 useDeepCompareEffect 钩子

function useGetProducts(filters: Record<string, string>) {
  useDeepCompareEffect(() => {
    syncFilters(filters);
  }, [filters]);
}

4. 对象进行字符串化

function useGetProducts(filters: Record<string, string>) {
 
  const json = JSON.stringify(filters);
 
  useEffect(() => {
    const filters = JSON.parse(json);
    syncFilters(filters);
  }, [json]);
}