React中父子共享状态时如何仅重渲染指定子组件

1. 将子组件的状态与逻辑独立封装 #

把每个子组件对应的状态和业务逻辑直接放到子组件内部，父组件只负责渲染子组件，不持有子组件的状态。这样父组件没有自身状态更新时就不会触发重渲染，子组件自行管理状态，仅更新自身。

示例代码：

// 独立封装的子组件
const ChildComp1 = () => {
  const [state, setState] = useState(0);
  
  // 子组件内部处理交互逻辑
  const handleClick = () => {
    setState(prev => prev + 1);
  };

  return <div onClick={handleClick}>{state}</div>;
};

const ParentComp = () => {
  // 父组件不再持有子组件的状态
  return (
    <div>
      <ChildComp1 />
      <ChildComp1 />
      <ChildComp1 />
    </div>
  );
};

2. 用useRef+forwardRef传递子组件更新方法 #

如果必须在父组件统一处理逻辑，可以通过useRef保存子组件的更新函数，父组件直接调用子组件的方法，避免更新自身状态，从而防止父组件重渲染。

示例代码：

const ChildComp1 = forwardRef((props, ref) => {
  const [state, setState] = useState(0);
  
  // 将更新方法挂载到ref上，供父组件调用
  useImperativeHandle(ref, () => ({
    updateState: () => setState(prev => prev + 1)
  }));

  return <div>{state}</div>;
});

const ParentComp = () => {
  const child1Ref = useRef(null);
  const child2Ref = useRef(null);
  const child3Ref = useRef(null);

  // 父组件处理复杂逻辑时，直接调用对应子组件的更新方法
  const handleTargetUpdate = (targetIndex) => {
    switch(targetIndex) {
      case 1:
        child1Ref.current?.updateState();
        break;
      case 2:
        child2Ref.current?.updateState();
        break;
      case 3:
        child3Ref.current?.updateState();
        break;
    }
  };

  return (
    <div>
      <button onClick={() => handleTargetUpdate(1)}>更新子组件1</button>
      <button onClick={() => handleTargetUpdate(2)}>更新子组件2</button>
      <button onClick={() => handleTargetUpdate(3)}>更新子组件3</button>
      <ChildComp1 ref={child1Ref} />
      <ChildComp1 ref={child2Ref} />
      <ChildComp1 ref={child3Ref} />
    </div>
  );
};

3. 用轻量状态管理库拆分状态 #

借助Zustand、Jotai这类轻量状态管理库，为每个子组件创建独立的状态单元，子组件仅订阅自身需要的状态，父组件不持有这些状态，自然不会因子组件状态更新而重渲染。

以Jotai为例：

import { atom, useAtom } from 'jotai';

// 为每个子组件创建独立的原子状态
const state1Atom = atom(0);
const state2Atom = atom(0);
const state3Atom = atom(0);

const ChildComp1 = ({ targetAtom }) => {
  const [state, setState] = useAtom(targetAtom);
  return <div onClick={() => setState(prev => prev + 1)}>{state}</div>;
};

const ParentComp = () => {
  // 父组件不订阅任何子组件的状态，因此不会触发重渲染
  return (
    <div>
      <ChildComp1 targetAtom={state1Atom} />
      <ChildComp1 targetAtom={state2Atom} />
      <ChildComp1 targetAtom={state3Atom} />
    </div>
  );
};

补充说明 #

• memo只能防止子组件在props未变化时重渲染，但父组件自身状态更新导致的重渲染无法通过memo避免——父组件重渲染时会重新生成子组件的JSX结构，即便子组件因memo跳过渲染，父组件的渲染逻辑依然会执行。
• 核心思路是让父组件不持有需要频繁更新的状态，要么将状态下沉到子组件，要么用外部状态管理隔离状态，让父组件不受这些状态更新的影响。

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