如何在 React 中避免过度使用 useCallback 和 useMemo

上述所有子组件都不维护任何状态或函数，它们的状态和功能都是从SearchPage组件中获取的。

我们不会详细讨论这些子组件的实现方式，因为它们仅仅负责渲染用户界面，完全不包含任何逻辑代码。

SearchPage组件的结构如下：

“`javascript

"use client";

);
}

“`

SearchPage组件负责处理渲染该页面所需的所有逻辑：

• 它会获取products、countries、colors以及modes这些数据，并将countries、colors和modes传递给抽屉组件。

• 它还会跟踪抽屉组件的状态变化。

• 它定义了用于在本地对产品进行排序等功能所需的相关逻辑。

问题在于，只要这些状态中的任何一个发生变化，SearchPage组件中所有的相关函数都会被重新生成。例如，当在获取产品的useQuery函数(productsQuery)中，isLoading的状态从false变为true时，所有相关的函数和计算结果都会被重新计算。

首先可能会想到的解决办法是使用useCallback和useMemo来缓存这些函数和计算结果。虽然这种方法确实有效，但它会为这个页面带来不必要的性能开销。

一个更好的解决方案是将状态和相关逻辑放在它们实际被使用的位置附近。

如何将状态逻辑下移

其思路是这样的：如果只有某个组件需要使用某段状态或函数，那么就应该让这个组件自己拥有这些资源。当一个子组件管理自己的状态时，该状态的变更就不会导致父组件的重新渲染。这样一来，所有同级组件的状态和功能都会保持稳定，也就无需使用useMemo来进行缓存了。

不过，也不要将逻辑下移得过于深远，否则会导致共享功能的测试或协调变得困难。我们的目标并不是把所有的逻辑都隐藏在最深层的组件中，而是要将状态和逻辑放在对功能实现来说最为合适的层级上。

将ProductTable的逻辑移至其所属组件

观察一下产品的获取和排序过程，你会发现只有ProductsTable这个组件需要使用这些数据。因此，我们可以把获取数据和排序逻辑直接放到ProductsTable组件中。

目前，ProductsComponent是通过props来接收状态和逻辑的：

"use client";

interface ProductTableProps {
  products: Product[];
  isLoading: boolean;
  handleColumnClick: (field: LocalSortField) => void;
  localSort: { field: LocalSortField; dir: SortDir } | null;
}

export function ProductTable({
  products,
  isLoading,
  handleColumnClick,
  localSort,
}: ProductTableProps) {
  // 使用props来渲染UI
}

现在，ProductTable将负责自己获取数据并处理相关逻辑：

interface ProductTableProps {
  filters: FilterState;
}

export function ProductTable({ filters }: ProductTableProps) {
  const [localSort, setLocalSort] = useState<{
    field: LocalSortField;
    dir: "asc" | "desc";
  } | null>>(null);

  const apiFilters = {
    query: filters.query,
    country: filters.country || undefined,
    color: filters.color || undefined,
    mode: filters.mode || undefined,
    minPrice: filters.minPrice ? Number(filters.minPrice) : undefined,
    maxPrice: filters.maxPrice ? Number.filters.maxPrice) : undefined,
    sortField: filters.sortField,
    sortDir: filters.sortDir,
  };

  const { data: products = [], isLoading } = useQuery({
    queryKey: ["products", apiFilters],
    queryFn: () => fetchProducts(apiFilters),
  });

  const handleColumnClick = (field: LocalSortField) => {
    setLocalSort((prev) => {
      if (!prev || prev.field !== field) return { field, dir: "asc" };
      if (prev.dir === "asc") return { field, dir: "desc" };

      return null;
    });
  };

  let sortedProducts = products;
  if (localSort) {
    sortedProducts = [...products].sort((a, b) => {
      const aVal = a[localSort.field];
      const bVal = b[localSort.field];
      const cmp =
        typeof aVal === "string"
          ? aVal.localeCompare(bVal as string)
          : (aVal as number) - (bVal as number);
      return localSort.dir === "desc" ? -cmp : cmp;
    });
  }

  return <>/*== 使用props来渲染UI ==*/></>;
}

现在，当 `isLoading` 的值发生变化时，`SearchPage` 组件不会重新渲染。这意味着 `SearchPage` 组件中计算得出的衍生值以及其他函数也不会被重新生成。唯一会被重新生成的值和函数是 `sortedProducts` 和 `handleColumnClick`。

`SearchPage` 组件的变化后的结构如下：

"use client";

import { ChangeEvent, useEffect, useRef, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { fetchColors, fetchCountries, fetchModes } from "./utils";
import { Header } from "./_components/header";
import { FilterDrawer } from "./_components/filter-drawer";
import { ProductTable } from "./_components/products-table";
import { FilterChips } from "./_components/filter-chips";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { FilterState, SortDir, SortField } from "./interfaces";

const DEFAULTS: FilterState = {
  query: "",
  country: "",
  color: "",
  mode: "",
  minPrice: "",
  maxPrice: "",
  sortField: "name",
  sortDir: "asc",
};

export default function SearchPage() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  const [drawerOpen, setDrawerOpen] = useState(false);

  const searchRef = useRef<HTMLInputElement>>(null);
  const searchTimerRef = useRef<ReturnType<typeof setTimeout>> | null>(null);

  const filters: FilterState = {
    query: searchParams.get("q") ?? DEFAULTS.query,
    country: searchParams.get("country") ?? DEFAULTS.country,
    color: searchParams.get("color") ?? DEFAULTS.color,
    mode: searchParams.get("mode") ?? DEFAULTS.mode,
    minPrice: searchParams.get("minPrice") ?? DEFAULTS.minPrice,
    maxPrice: searchParams.get("maxPrice") ?? DEFAULTS.maxPrice,
    sortField:
      (searchParams.get("sortField") as SortField) ?? DEFAULTS.sortField,
    sortDir: (searchParams.get("sortDir") as SortDir) ?? DEFAULTS.sortDir,
  };

  const countriesQuery = useQuery({
    queryKey: ["countries"],
    queryFn: fetchCountries,
    staleTime: Infinity,
  });

  const colorsQuery = useQuery({
    queryKey: ["colors"],
    queryFn: fetchColors,
    staleTime: Infinity,
  });

  const modesQuery = useQuery({
    queryKey: ["modes"],
    queryFn: fetchModes,
    staleTime: Infinity,
  });

  // 更新抽屉中的过滤条件
  const setFilters = (partial: Partial<FilterState>>) => {
    const next = new URLSearchParams(searchParams.toString());
    const merged = { ...filters, ...partial };

    const keyMap: Record<keyof FilterState, string>> = {
      query: "q",
      country: "country",
      color: "color",
      mode: "mode",
      minPrice: "minPrice",
      maxPrice: "maxPrice",
      sortField: "sortField",
      sortDir: "sortDir",
    };

    (Object.keys(merged) as (keyof FilterState)[]).forEach((k) => {
      const paramKey = keyMap[k];
      const val = merged[k];
      const def = DEFAULTS[k];
      if (val && val !== def) {
        next.set(paramKey, val);
      } else {
        next.delete(paramKey);
      }
    });

    router.push(`\({pathname}?\){next.toString()}`, { scroll: false });
  };

  const resetFilters = () => {
    router.push(pathname, { scroll: false });
  };

  const handleQueryChange = (e: ChangeEvent<HTMLInputElement>>) => {
    const val = e.target.value;

    if (searchTimerRef.current) clearTimeout(searchTimerRef.current);

    searchTimerRef.current = setTimeout(() => {
      setFilters({ query: val });
    }, 400);
  };

  const handleClearQuery = () => {
    if (searchRef.current) {
      searchRef.current.value = "";
    }

    setFilters({ query: "" });
  };

  const hasPriceFilter = filters.minPrice || filters.maxPrice;
  const priceLabel = [
    filters.minPrice ? `$${filters.minPrice}` : null,
    filters.maxPrice ? `$${filters.maxPrice}` : null,
  ]
    .filter(Boolean)
    .join(" - ");

  const activeFilterCount = [
    filters.country,
    filters.color,
    filters.mode,
    filters.minPrice,
    filters.maxPrice,
  ].filter(Boolean).length;

  useEffect(() => {
    return () => {
      if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
    };
  }, []);

  return (
    
 0 && (
          
      <\/main>
    <\/div>
  );
}

SearchPage组件不再负责获取和排序产品数据了。

将过滤逻辑移至相应的组件中

为实现这一功能，我们需要使用不同的状态、数据和函数：

• drawerOpen和setDrawerOpen用于控制过滤抽屉的显示/隐藏。

• countries、colors和modes这些数据允许用户选择不同的筛选条件。

• activeFilterCount用于显示当前处于激活状态的过滤条件的数量。

目前，用于实现过滤功能的组件主要有两个。第一个是位于Header组件内的按钮，其外观如下：

<button
  onClick={onToggleFilters}
  className="relative ml-auto flex items-center gap-2 px-3 py-2 text-sm text-black font-medium border border-stone-300 rounded-lg hover:bg-stone-100 transition"
>
  <SlidersHorizontal className="w-4 h-4" />
  过滤器>
  {activeFilterCount > 0 && (
    
      {activeFilterCount}
    
  )}
</button>;

第二个组件是FilterDrawer，其外观如下：

"use client";

import { useEffect, useRef } from "react";
import { X, RotateCcw } from "lucide-react";
import { FilterState } from "../interfaces";
import { SortSection } from "./filter/sort-section";
import { NarrowResultsSection } from "./filter/narrow-result-section";

interface FilterDrawerProps {
  open: boolean;
  onClose: () => void;
  filters: FilterState;
  onChange: (partial: Partial) => void;
  onReset: () => void;
  countries: string[];
  colors: string[];
  modes: string[];
  activeFilterCount: number;
}

export function FilterDrawer({
  open,
  onClose,
  filters,
  onChange,
  onReset,
  countries,
  colors,
  modes,
  activeFilterCount,
}: FilterDrawerProps) {
  const drawerRef = useRef〈HTMLDivElement〉(null);

  // 在用户按下Escape键时关闭抽屉
  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    document.addEventListener("keydown", handler);
    return () => document.removeEventListener("keydown", handler);
  }, [onClose]);

  // 当抽屉打开时，防止页面滚动
  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => {
      document.body.style.overflow = "";
    };
  }, [open]);

  return (
    <><>
      {/* 背景层 */}
      

        {/* 页头 */}
        
 0 && (
              
            )}
          
>
          
            
          
        

        


        {/* 页脚 */}
        {activeFilterCount > 0 && (
          

              
              清除所有过滤器
            
          
        )}
      <></aside>
    <>>
  );
}

你可以将这两个组件合并成一个单一的`Filter`组件，让这个组件包含所有这些逻辑：

import { RotateCcw, SlidersHorizontal, X } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { SortSection } from "./filter/sort-section";
import { NarrowResultsSection } from "./filter/narrow-result-section";
import { FilterState } from "../interfaces";
import { usePathname, useRouter } from "next/navigation";
import { useQuery } from "@tanstack/react-query";
import { fetchColors, fetchCountries, fetchModes } from "../utils";

interface FilterProps {
  filters: FilterState;
  onChange: (partial: Partial) => void;
}

const Filter = ({ filters, onChange }: FilterProps) => {
  const { data: countries = [] } = useQuery({
    queryKey: ["countries"],
    queryFn: fetchCountries,
    staleTime: Infinity,
  });

  const { data: colors = [] } = useQuery({
    queryKey: ["colors"],
    queryFn: fetchColors,
    staleTime: Infinity,
  });

  const { data: modes = [] } = useQuery({
    queryKey: ["modes"],
    queryFn: fetchModes,
    staleTime: Infinity,
  });

  const router = useRouter();
  const pathname = usePathname();
  const [drawerOpen, setDrawerOpen] = useState(false);

  const drawerRef = useRef(null);

  const onClose = () => setDrawerOpen(false);
  const openDrawer = () => setDrawerOpen(true);
  const resetFilters = () => {
    onClose();
    router.push(pathname, { scroll: false });
  };

  const activeFilterCount = [
    filters.country,
    filters.color,
    filters.mode,
    filters.minPrice,
    filters.maxPrice,
  ].filter(Boolean).length;

  // 通过按下Esc键关闭抽屉
  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (e.key === "Escape") setDrawerOpen(false);
    };
    document.addEventListener("keydown", handler);
    return () => document.removeEventListener("keydown", handler);
  }, []);

  // 当抽屉打开时阻止页面滚动
  useEffect(() => {
    document.body.style.overflow = drawerOpen ? "hidden" : "";
    return () => {
      document.body.style.overflow = "";
    };
  }, [drawerOpen]);

  return (
    <>
      
        
        >筛选条件</span>
        {activeFilterCount > 0 && (
          
            {activeFilterCount}
          
        )}
      
      {/* 背景图 */}
      

      {/* 抽屉面板 */}
      
    
  );
};

export default Filter;

你可以进一步优化这个设计。请注意，NarrowResultsSection是唯一一个会使用获取到的countries、colors和modes数据的组件。而在该组件内部，每一个SelectField》都会使用这些数据中的一部分。

import { FilterState } from "..interfaces";
import { PriceRangeField } from "./price-range";
import { SelectField } from "./select-field";

interface NarrowResultsSectionProps {
  filters: FilterState;
  onChange: (partial: Partial) => void;
  countries: string[];
  colors: string[];
  modes: string[];
}

export function NarrowResultsSection({
  filters,
  onChange,
  countries,
  colors,
  modes,
}: NarrowResultsSectionProps) {
  return (
    

      
筛选结果
      
       onChange({ country: v})}
        placeholder="所有国家"
      />
      
       onChange({ color: v})}
        placeholder="所有颜色"
      />
      
       onChange({ mode: v})}
        placeholder="所有模式"
      />
      
      
    
  );
}

interface SelectFieldProps {
  label: string;
  value: string;
  options: string[];
  onChange: (v: string) => void;
  placeholder: string;
}

export function SelectField({
  label,
  value,
  options,
  onChange,
  placeholder,
}: SelectFieldProps) {
  return <>>{/*=== 渲染用户界面 ===*/</>>;
}

import { useQuery } from "@tanstack/react-query";

interface SelectFieldProps {
  label: string;
  value: string;
  onChange: (v: string) => void;
  placeholder: string;
  queryFn(): Promise>{/*=== 渲染用户界面 ===*/</>>;
}

"use client";

import { Search as SearchIcon, X } from "lucide-react";
import { ChangeEvent, useEffect, useRef } from "react";
import { FilterState } from "../interfaces";

interface SearchProps {
  query: string;
  onChange: (partial: Partial) => void;
}

const Search = ({ query, onChange }: SearchProps) => {
  const searchRef = useRef(null);
  const searchTimerRef = useRef | null>(null);

  const handleClearQuery = () => {
    if (searchRef.current) {
      searchRef.current.value = "";
    }

    onChange({ query: "" });
  };

  const handleQueryChange = (e: ChangeEvent) => {
    const val = e.target.value;

    if (searchTimerRef.current) clearTimeout(searchTimerRef.current);

    searchTimerRef.current = setTimeout(() => {
      onChange({ query: val });
    }, 400);
  };

  useEffect(() => {
    return () => {
      if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
    };
  }, []);

  return 
/*=== 显示用户界面 ===*/
;
};

export default Search;

interface FilterChipsProps {
  filters: FilterState;
  setFilters: (partial: Partial) => void;
  reset Filters: () => void;
}

export function FilterChips({
  filters,
  setFilters,
  resetFilters,
}: FilterChipsProps) {
  const priceLabel = [
    filters.minPrice ? `$${filters.minPrice}` : null,
    filters.maxPrice ? `$${filters.maxPrice}` : null,
  ]
    .filter(Boolean)
    .join(" - ");

  const hasPriceFilter = filters.minPrice || filters.maxPrice;

  return