React与Redux中组件重复渲染问题排查与解决

针对你遇到的切换组件时重复渲染的问题，核心原因大多是不必要的函数/JSX重新创建或未做组件渲染优化，可以通过以下几个步骤解决：

1. 用 useCallback 缓存点击回调 #

你当前的 onClick 是内联函数，每次组件渲染都会生成新的函数实例，导致 IconButton 因为 props 变化触发重渲染。用 useCallback 缓存这个函数，确保只有依赖项变化时才重新生成：

import { useCallback } from 'react';

// 在组件内部定义缓存后的回调
const handleToggle = useCallback(() => {
  handleProductCard(productIndex);
  productCardRef.current?.scrollIntoView({ behavior: "smooth" });
}, [handleProductCard, productIndex]);

然后把这个缓存后的函数传给 IconButton：

<IconButton
  aria-label="切换显示"
  size="large"
  onClick={handleToggle}
  sx={{ padding: 0 }}
>
  {formik.values.hideProductCard ? (
    <KeyboardArrowDownIcon size="large" />
  ) : (
    <KeyboardArrowUpIcon size="large" />
  )}
</IconButton>

2. 用 memo 包装 ProductCard 组件 #

如果 ProductCard 是独立组件，父组件状态变化时可能会连带触发它的重渲染。用 React.memo 包裹组件，让它只在 props 真正变化时才重新渲染：

import { memo } from 'react';

const ProductCard = memo((props) => {
  // 组件原有逻辑
});

export default ProductCard;

3. 缓存状态修改函数 #

如果 handleProductCard 是用来修改 Formik 状态的函数，也要确保它不会每次渲染都重新创建。用 useCallback 包裹它：

const handleProductCard = useCallback((index) => {
  formik.setValues(prev => ({
    ...prev,
    hideProductCard: !prev.hideProductCard
  }));
}, [formik.setValues]);

4. 缓存 JSX 元素 #

你把 toggleArrow 作为变量定义在组件内部，每次渲染都会重新创建这个 JSX 元素。用 useMemo 缓存它，减少不必要的元素重建：

import { useMemo } from 'react';

const toggleArrow = useMemo(() => (
  <IconButton
    aria-label="切换显示"
    size="large"
    onClick={handleToggle}
    sx={{ padding: 0 }}
  >
    {formik.values.hideProductCard ? (
      <KeyboardArrowDownIcon size="large" />
    ) : (
      <KeyboardArrowUpIcon size="large" />
    )}
  </IconButton>
), [handleToggle, formik.values.hideProductCard]);

这些优化的核心是减少不必要的渲染触发条件，确保只有当组件依赖的状态或 props 真正变化时，才会触发重渲染。

内容的提问来源于stack exchange，提问作者Joseph