如何让ChildA状态变更时不重渲染自身，仅触发ChildB重渲染？

问题场景 #

我在开发React项目时遇到一个需求：父组件包含ChildA（实际为地图组件）和ChildB（实际为图表组件），ChildA内的按钮点击时需要将ID传递给ChildB，让ChildB重渲染更新内容，但我不希望ChildA（地图）跟着重渲染。目前使用useState存储点击的buttonId，每次点击按钮都会导致ChildA也触发重渲染，请问怎么实现需求？

解决方案 #

核心思路是切断ChildA与父组件状态的不必要关联，同时稳定ChildA的props，避免无意义的重渲染，具体分三步：

1. 移除ChildA不需要的props
   你的代码里给ChildA传递了buttonId，但ChildA根本不需要使用这个值，完全可以删掉这个props，减少触发重渲染的条件。

2. 用useCallback稳定点击函数的引用
   父组件中直接定义的onClick回调，每次父组件渲染都会创建新的函数实例，导致ChildA的props变化，触发重渲染。用useCallback包裹这个函数，让它的引用保持稳定，只有当依赖项变化时才更新。

3. 用React.memo包裹ChildA
   React.memo会对组件的props做浅比较，只有当props真正变化时才会触发组件重渲染。结合前两点，ChildA的props不会再无意义变化，就能避免不必要的重渲染。

修改后的完整代码 #

Parent组件

import { useState, useCallback } from 'react';
import ChildA from './ChildA';
import ChildB from './ChildB';

export function Parent() {
  const [buttonId, setButtonId] = useState(null);
  
  // 用useCallback稳定函数引用，依赖数组为空即可（setButtonId是React内置的稳定函数）
  const handleButtonClick = useCallback((id) => {
    setButtonId(id);
  }, []);

  return (
    <>
      {/* 移除不需要的buttonId props，只传递稳定的点击回调 */}
      <ChildA onClick={handleButtonClick} />
      {/* 修正原代码笔误：第二个ChildA应为ChildB */}
      <ChildB inputId={buttonId} />
    </>
  );
}

ChildA组件

import { memo } from 'react';

// 用memo包裹组件，实现props浅比较
const ChildA = memo(({ onClick }) => {
  // 可以添加console.log测试，点击按钮时不会打印这条日志
  console.log('ChildA 触发重渲染');
  return (
    <>
      <button key='1' onClick={() => onClick(1)}>按钮1</button>
      <button key='2' onClick={() => onClick(2)}>按钮2</button>
      <button key='3' onClick={() => onClick(3)}>按钮3</button>
      <button key='4' onClick={() => onClick(4)}>按钮4</button>
      <div>我是不需要重渲染的地图/元素</div>
    </>
  );
});

export default ChildA;

ChildB组件

export function ChildB({ inputId }) {
  // 点击按钮时会打印这条日志，说明ChildB正常重渲染
  console.log('ChildB 触发重渲染');
  return (
    <>
      <div>当前选中的ID：{inputId}</div>
      {/* 这里是需要根据inputId更新的图表组件 */}
    </>
  );
}

补充说明 #

• 如果ChildA内部还有自己的状态或订阅的Context导致重渲染，可能需要进一步优化（比如用useMemo处理内部计算值），但针对当前需求场景，以上方案足够解决问题。
• React.memo默认是浅比较，如果ChildA的props包含复杂对象，可在memo的第二个参数自定义比较函数，实现深比较逻辑。

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