为何子组件componentWillReceiveProps不等待父组件setState执行完成？

这问题我之前做项目时也踩过坑，先给你理清楚为什么会出现这个顺序：React里的setState是异步批量更新的，当你在父组件的hideSearchBar方法里调用setState，React不会立刻更新父组件的state，而是把这个更新任务加入队列。接下来React会触发父组件的重新渲染，把更新后的props传给子组件，这时候子组件的componentWillReceiveProps就会被调用。而setState的回调函数是**整个组件树渲染完成（DOM更新完毕）**之后才会执行，所以就出现了你看到的顺序：hideSearchBar → componentWillReceiveProps → setState回调的console.log。

下面给你几种可行的解决方案，按需选择：

1. 用componentDidUpdate替代componentWillReceiveProps（推荐） #

componentWillReceiveProps已经被React标记为不安全的生命周期钩子，容易引发副作用（比如无限循环渲染），官方更推荐用componentDidUpdate来处理props变化后的逻辑。这个钩子会在组件更新完成后触发，此时父组件的state已经完全更新，你可以放心检查props：

class SearchBar extends React.Component {
  componentDidUpdate(prevProps) {
    // 先判断props是否发生变化，避免不必要的执行
    if (this.props.isSearchBarHidden !== prevProps.isSearchBarHidden) {
      // 这里执行你的检查逻辑，此时父组件state已经完全更新
      console.log('父组件state已更新，开始检查props');
    }
  }

  // ...其他组件代码
}

2. 确保在componentWillReceiveProps中使用最新的nextProps #

如果你暂时还需要保留componentWillReceiveProps，要注意这个钩子的参数nextProps就是父组件更新后传递过来的新props，而this.props还是更新前的旧值。所以你必须用nextProps来做判断，而不是this.props：

class SearchBar extends React.Component {
  componentWillReceiveProps(nextProps) {
    // 用nextProps和当前props做对比
    if (nextProps.isSearchBarHidden !== this.props.isSearchBarHidden) {
      // 这里的nextProps已经是父组件state更新后的结果
      console.log('基于最新props执行检查');
    }
  }

  // ...其他组件代码
}

3. 父组件通过回调主动通知子组件 #

如果你的场景更复杂，比如父组件setState后还有其他异步操作，需要确保子组件在所有操作完成后再执行检查，可以在父组件的setState回调里调用子组件的方法：

父组件代码： #

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.searchBarRef = React.createRef();
  }

  hideSearchBar() {
    this.setState({ isSearchBarHidden: true }, () => {
      // setState完成后，主动调用子组件的检查方法
      this.searchBarRef.current.performCheck();
      console.log('setState回调执行');
    });
  }

  render() {
    return <SearchBar ref={this.searchBarRef} isSearchBarHidden={this.state.isSearchBarHidden} />;
  }
}

子组件代码： #

class SearchBar extends React.Component {
  performCheck() {
    // 这里执行你的检查逻辑，此时父组件所有更新都已完成
    console.log('收到父组件通知，开始检查');
  }

  // ...其他组件代码
}

4. 函数组件用useEffect监听props变化 #

如果你的组件是函数式的，直接用useEffect钩子监听目标props的变化即可，useEffect会在组件更新完成后执行，效果和类组件的componentDidUpdate一致：

import { useEffect } from 'react';

function SearchBar(props) {
  useEffect(() => {
    // 当isSearchBarHidden变化时执行逻辑
    console.log('父组件state已更新，开始检查props');
    // 这里写你的检查代码
  }, [props.isSearchBarHidden]); // 依赖数组，只有当这个props变化时才触发

  // ...其他组件代码
}

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