React中调用父组件更新函数的首选方式是什么？

嘿，我来帮你梳理下这个问题的最佳解决方案～

首先得明确：绝对不要用componentWillUpdate、componentWillReceiveProps这类已废弃的生命周期钩子，React在新版本里已经标记它们为不安全，甚至逐步移除了，所以你提到的方案2里的这些钩子直接排除。

下面分两种组件类型给你说首选的实现方式：

类组件：用componentDidUpdate统一触发 #

这个生命周期钩子会在组件状态更新完成后触发，刚好适合在状态稳定后通知父组件。而且一定要加条件判断，避免不必要的父组件更新。

举个实际代码例子：

class MoneyCounter extends React.Component {
  state = { count: 0 };

  // 按钮只负责更新内部状态，不用管父组件的回调
  handleButtonClick = (delta) => {
    this.setState(prevState => ({ count: prevState.count + delta }));
  };

  // 统一的状态更新监听点
  componentDidUpdate(prevProps, prevState) {
    // 只有当count真正变化时，才通知父组件
    if (prevState.count !== this.state.count) {
      this.props.onChange(this.state.count);
    }
  }

  render() {
    return (
      <div>
        <button onClick={() => this.handleButtonClick(-1)}>-</button>
        <span>{this.state.count}</span>
        <button onClick={() => this.handleButtonClick(1)}>+</button>
      </div>
    );
  }
}

这样所有按钮只负责修改内部状态，父组件的回调逻辑完全集中在componentDidUpdate里，完美符合你想要的“统一感知状态更新”的需求。

函数组件：用useEffect钩子监听状态变化 #

现在React更推荐函数组件写法，useEffect就是专门处理这类“状态变化后执行副作用”的场景，用起来更简洁清晰。

代码示例：

import { useState, useEffect } from 'react';

function MoneyCounter({ onChange }) {
  const [count, setCount] = useState(0);

  handleButtonClick = (delta) => {
    setCount(prev => prev + delta);
  };

  // 监听count的变化，一旦变化就调用父组件的onChange
  useEffect(() => {
    onChange(count);
  }, [count, onChange]); // 依赖数组：只有count或onChange变化时才触发

  return (
    <div>
      <button onClick={() => handleButtonClick(-1)}>-</button>
      <span>{count}</span>
      <button onClick={() => handleButtonClick(1)}>+</button>
    </div>
  );
}

这里按钮依旧只负责更新本地状态，useEffect作为统一的监听入口，自动在count变化时触发父组件回调，逻辑非常清晰。

为什么不推荐你最初的两个方案？ #

• 方案1（每个按钮调用onChange）：会导致代码重复，按钮多的话维护成本高，而且如果后续状态更新逻辑变复杂，很容易漏写或者写错回调，不符合DRY原则。
• 方案2（废弃生命周期）：componentWillUpdate这类钩子在异步渲染模式下容易引发bug，React官方早就不推荐使用了，属于过时的写法。

额外小提示 #

如果父组件传递的onChange是一个频繁变化的函数（比如父组件里定义的匿名函数），函数组件里可以配合useCallback包裹父组件的onChange，避免useEffect不必要地频繁触发。

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