React 15中如何在渲染前更新父子组件状态并避免额外渲染？

方案A：回调在渲染前执行——不可行 #

React 中 setState 的回调函数是专门设计在状态更新完成、组件渲染结束后触发的，这是框架的固有机制，没有办法修改这个执行顺序。因为 setState 是异步更新状态，回调的作用就是让你在DOM确实更新后再执行后续逻辑，所以方案A根本无法实现。

方案B：子组件作为单一数据源——完全符合规范 #

首先明确：React 并没有强制要求必须把父组件作为所有共享状态的数据源，核心原则是状态应该放在需要使用它的最顶层组件，最小化状态的作用范围。如果你的场景满足以下条件，把子组件作为单一数据源是完全合理的：

• 这个状态主要是子组件自身使用，父组件只是需要同步获取该状态做其他处理（而非用它来控制子组件的渲染）
• 把状态放在子组件能避免不必要的props传递和跨组件状态同步逻辑

你可以通过 shouldComponentUpdate 来忽略父组件传递的无关props变化，从而避免二次渲染。比如类组件的实现示例：

class ChildComponent extends React.Component {
  shouldComponentUpdate(nextProps) {
    // 忽略父组件传递的propSentToChild变化，仅关注其他必要props的更新
    if (this.props.propSentToChild !== nextProps.propSentToChild) {
      return false;
    }
    // 其他props的判断逻辑，按需返回true/false
    return true;
  }

  handleStateUpdate = () => {
    this.setState({ updatedStateProperty }, () => {
      // 只通知父组件状态变化，父组件无需将该状态回传给子组件
      this.props.onChildStateChange(this.state.updatedStateProperty);
    });
  };

  // 其余组件逻辑...
}

关键优化点 #

导致二次渲染的核心原因是父组件把更新后的状态又回传给了子组件作为props，只要调整这个逻辑：父组件接收子组件的状态后，仅用于自身或其他组件的逻辑，不再将该状态传递回子组件，就能从根源上避免循环更新和二次渲染。

如果后续有多个组件都需要用到这个状态，再考虑把状态提升到父组件或引入全局状态管理即可，当前场景下子组件作为单一数据源是最优解。

内容的提问来源于stack exchange，提问作者James Joshua Street