React优化：如何避免父组件useRef变化时子组件全量重渲染

核心问题：父组件每次渲染时，传递给子组件（如MultiSelect）的optionOnClick会生成新的函数引用，导致子组件触发不必要的重渲染。以下是具体解决方法：

1. 用useCallback缓存点击函数引用 #

在父组件（如ProductCriteriaGroup、BookingDetails）中，使用React的useCallback钩子包裹optionOnClick函数，确保只有当依赖项变化时，才生成新的函数引用。这样子组件接收的props引用不会无故变更，避免触发重渲染。

示例代码：

import { useCallback, useState } from 'react';

const ProductCriteriaGroup = () => {
  const [selectedOption, setSelectedOption] = useState(null);

  // 缓存点击函数，仅当依赖项变化时更新
  const optionOnClick = useCallback((option) => {
    setSelectedOption(option);
    // 其他业务逻辑
  }, [setSelectedOption]); // 根据实际逻辑添加依赖项

  return <MultiSelect options={options} optionOnClick={optionOnClick} selected={selectedOption} />;
};

2. 子组件用React.memo包裹 #

给MultiSelect这类子组件加上React.memo包装，让组件仅在props浅比较发生变化时才重渲染。配合useCallback使用，能彻底阻止不必要的重渲染。

示例代码：

import { memo } from 'react';

const MultiSelect = memo(({ options, optionOnClick, selected }) => {
  // 组件原有渲染逻辑
  return (
    <div>
      {options.map(opt => (
        <div 
          key={opt.id} 
          onClick={() => optionOnClick(opt)}
          className={selected?.id === opt.id ? 'active' : ''}
        >
          {opt.label}
        </div>
      ))}
    </div>
  );
});

export default MultiSelect;

注：如果props包含复杂对象，可给memo传入第二个参数自定义比较逻辑，但多数场景下浅比较足够。

3. 拆分组件缩小渲染范围 #

若父组件包含大量与选择操作无关的内容，将这部分内容拆分为独立子组件并使用React.memo包裹。这样当optionOnClick触发父组件状态变化时，只有关联的子组件（如MultiSelect）会重渲染，其他组件不受影响。

比如在BookingDetails中拆分无关组件：

const BookingSummary = memo(() => {
  // 与选择操作无关的订单摘要内容
  return <div>订单总价、日期等信息</div>;
});

const BookingDetails = () => {
  // 状态和点击函数逻辑
  return (
    <div>
      <MultiSelect optionOnClick={optionOnClick} />
      <BookingSummary />
    </div>
  );
};

4. 状态下沉（可选，适合单一组件使用场景） #

如果只有MultiSelect需要处理点击后的状态，可将状态直接放在MultiSelect组件内部，无需从父组件传递点击函数。这样父组件不会因状态变化重渲染，其他子组件也不会受影响。

示例代码：

const MultiSelect = memo(({ options }) => {
  const [selected, setSelected] = useState(null);

  const handleOptionClick = (option) => {
    setSelected(option);
    // 如果需要通知父组件，可通过props传递回调（但依然建议用useCallback缓存）
  };

  return (
    <div>
      {options.map(opt => (
        <div 
          key={opt.id} 
          onClick={() => handleOptionClick(opt)}
          className={selected?.id === opt.id ? 'active' : ''}
        >
          {opt.label}
        </div>
      ))}
    </div>
  );
});

注意事项 #

• useCallback的依赖项必须完整，遗漏依赖会导致函数捕获旧值，引发逻辑错误。
• 不要过度优化，仅当重渲染确实造成性能问题时再实施上述方案，避免增加代码复杂度。

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