React中实现兄弟组件状态共享且避免不必要子组件重渲染

你遇到的核心问题是：父组件维护共享状态时，更新状态会触发所有子组件重渲染，哪怕子组件依赖的状态没有变化。之前用PureComponent没生效，本质是子组件的props中存在不稳定的引用（比如每次render新建的箭头函数），导致PureComponent的浅比较认为props已变更，从而触发重渲染。

以下是几种针对性的解决方案：

1. 稳定回调函数引用（类组件场景） #

将状态更新逻辑抽离为类方法，并在constructor中绑定this，确保每次render时传递给子组件的onClick引用不变：

class Parent extends React.Component {
  constructor() {
    super();
    this.state = { a: 1, b: 2, c: 3 };
    // 提前绑定方法，保证引用稳定
    this.updateB = this.updateB.bind(this);
    this.updateC = this.updateC.bind(this);
    this.updateA = this.updateA.bind(this);
  }

  updateB() {
    this.setState(prev => ({ ...prev, b: prev.b + 1 }));
  }

  updateC() {
    this.setState(prev => ({ ...prev, c: prev.c + 1 }));
  }

  updateA() {
    this.setState(prev => ({ ...prev, a: prev.a + 1 }));
  }

  render() {
    return (
      <div>
        <Child1 a={this.state.a} onClick={this.updateB} />
        <Child2 b={this.state.b} onClick={this.updateC} />
        <Child3 c={this.state.c} onClick={this.updateA} />
      </div>
    );
  }
}

// 子组件使用PureComponent
class Child3 extends React.PureComponent {
  componentDidMount() {
    console.log('Child3 mounted');
  }

  render() {
    console.log('Child3 rendered');
    return <button onClick={this.props.onClick}>Child3: {this.props.c}</button>;
  }
}

这样修改后，当点击Child1更新b时，Child3的c值和onClick引用都未变化，PureComponent会跳过重渲染。

2. React.memo + useCallback（函数组件场景） #

如果改用函数组件，通过React.memo包裹子组件配合useCallback稳定回调引用，效果更简洁：

import { useState, useCallback } from 'react';

const Parent = () => {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);
  const [c, setC] = useState(3);

  // 用useCallback缓存回调，依赖项为空表示引用永远稳定
  const updateB = useCallback(() => {
    setB(prev => prev + 1);
  }, []);

  const updateC = useCallback(() => {
    setC(prev => prev + 1);
  }, []);

  const updateA = useCallback(() => {
    setA(prev => prev + 1);
  }, []);

  return (
    <div>
      <Child1 a={a} onClick={updateB} />
      <Child2 b={b} onClick={updateC} />
      <Child3 c={c} onClick={updateA} />
    </div>
  );
};

// React.memo会对props做浅比较，只有变化时才重渲染
const Child3 = React.memo(({ c, onClick }) => {
  console.log('Child3 rendered');
  return <button onClick={onClick}>Child3: {c}</button>;
});

3. 拆分状态与组件（进阶优化） #

如果父组件状态较多，可以将子组件与对应状态的逻辑拆分为独立的"容器组件"，让每个容器只管理自身相关的状态和回调，进一步隔离重渲染范围。不过这种方案适合状态逻辑复杂的场景，你的示例场景用前两种方案足够。

关键注意点 #

• 不要在render方法中直接定义箭头函数作为props传递，每次render都会生成新引用，破坏PureComponent/React.memo的浅比较逻辑。
• 若子组件需要传递复杂对象作为props，建议用useMemo（函数组件）或在父组件中缓存对象引用，避免每次render生成新对象。

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