ReactJS问题：父组件setState致子组件调用constructor而非componentWillReceiveProps

看起来你遇到的核心问题是子组件SubMenu被反复卸载重挂载，而非接收props更新——这就是为什么componentWillReceiveProps没触发，反而每次都走constructor的原因。我来帮你拆解问题并给出具体解决方案：

为什么会出现这个情况？ #

React只会对已经挂载的组件触发更新类生命周期钩子（比如componentWillReceiveProps）。如果你的SubMenu是通过条件渲染（比如{isOpen && <SubMenu />}）来控制显示的，那么当isOpen从false变为true时，SubMenu是第一次被挂载，而非更新；当isOpen变回false时，它又会被卸载。这种挂载/卸载的循环就会导致每次都执行constructor，过渡自然无法生效。

另外一个可能原因是你给SubMenu设置了不稳定的key（比如用Math.random()生成key），React会把不同key的组件判定为全新组件，同样会触发卸载重挂载。

具体解决方案 #

1. 始终渲染SubMenu，用props控制显示状态

不要通过条件渲染挂载/卸载SubMenu，而是让它始终存在于DOM中，通过父组件传递的isOpen props控制CSS类来实现展开/收起：

// NavItem组件代码
class NavItem extends React.Component {
  state = { isOpen: false };

  handleMouseEnter = () => this.setState({ isOpen: true });
  handleMouseLeave = () => this.setState({ isOpen: false });

  render() {
    return (
      <div 
        className="nav-item"
        onMouseEnter={this.handleMouseEnter}
        onMouseLeave={this.handleMouseLeave}
      >
        <span>{this.props.title}</span>
        {/* 始终渲染SubMenu，通过isOpen props控制状态 */}
        <SubMenu isOpen={this.state.isOpen} />
      </div>
    );
  }
}

2. 在SubMenu中用CSS过渡实现动画

SubMenu内部通过接收的isOpen props切换CSS类，基于可动画的属性（比如max-height，不要用display: none，因为它无法触发过渡）实现展开效果：

// SubMenu组件代码
class SubMenu extends React.Component {
  constructor(props) {
    super(props);
    console.log("SubMenu初始化（只会执行一次）");
  }

  // React 16.3+ 推荐用这个钩子替代componentWillReceiveProps
  static getDerivedStateFromProps(nextProps, prevState) {
    console.log("收到新的props：", nextProps.isOpen);
    // 如果需要基于props更新state，在这里处理
    return null;
  }

  // 如果你用的是旧版React，可以保留这个钩子
  componentWillReceiveProps(nextProps) {
    console.log("componentWillReceiveProps触发：", nextProps.isOpen);
  }

  render() {
    const { isOpen } = this.props;
    return (
      <div className={`sub-menu ${isOpen ? "sub-menu--open" : ""}`}>
        <div className="sub-menu-item">子菜单选项1</div>
        <div className="sub-menu-item">子菜单选项2</div>
      </div>
    );
  }
}

对应的CSS：

.sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
  background-color: #f8f9fa;
  padding-left: 20px;
}

.sub-menu--open {
  /* 设置一个足够容纳所有子项的高度 */
  max-height: 200px;
}

3. 确保SubMenu的key稳定（如果使用key的话）

如果你需要给SubMenu设置key，一定要用固定不变的值（比如菜单的唯一ID），避免动态生成的key：

// 错误写法：每次渲染key都变，导致组件重挂载
<SubMenu key={Math.random()} isOpen={this.state.isOpen} />

// 正确写法：用固定的唯一标识
<SubMenu key={this.props.menuId} isOpen={this.state.isOpen} />

验证效果 #

做完以上调整后，你会发现SubMenu的constructor只会在页面加载时执行一次，鼠标悬停/离开时，getDerivedStateFromProps（或componentWillReceiveProps）会正常触发，CSS过渡动画也能正常生效了。

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