React父组件状态更新后子组件渲染异常及board()调用时机咨询

我来帮你拆解这个问题，先理清楚核心逻辑，再给你解决方案：

一、为什么你觉得setState没触发Square渲染？ #

其实setState是一定会触发Square重新渲染的，你可能是误解了React的更新流程：

当你在handleClick里调用setState时，React不会立刻更新状态和渲染组件——它会把这次状态更新加入队列，等当前的事件处理函数执行完，再批量处理更新。完整的更新链条是：

1. Board组件的状态更新完成
2. Board重新执行render方法，给每个Square传递更新后的squares[i]作为props
3. Square因为props发生变化，重新render并更新DOM
4. 所有子组件（包括所有Square）都完成DOM更新后，Board的componentDidUpdate才会触发

你感觉Square没更新就执行了board()，大概率是这两种情况：

• 你在handleClick里调用setState后立刻同步调用了board()——这时候setState还没完成状态更新，Square自然还没渲染
• 你误以为componentDidUpdate是在子组件更新前执行，但实际上它是在所有子组件更新完成后才会触发的，可能是你的board()逻辑没正确获取到更新后的DOM状态？

二、如何确保在Square更新后再调用board()？ #

有两种靠谱的方式，根据你的场景选：

方式1：用setState的回调函数 #

setState支持第二个参数，这是一个回调函数，会在状态更新完成、所有组件（包括Square）都完成DOM更新后执行。把board()放在这里就万无一失：

handleClick(i) {
  const squares = this.state.squares.slice();
  // 先判断游戏是否已结束、格子是否已被填充（你的原有逻辑）
  if (calculateWinner(squares) || squares[i]) {
    return;
  }
  squares[i] = this.state.xIsNext ? 'X' : 'O';
  this.setState({
    squares: squares,
    xIsNext: !this.state.xIsNext,
  }, () => {
    // 这里的代码100%在Square更新后执行
    this.board();
  });
}

方式2：在componentDidUpdate中调用（推荐） #

如果每次Board的squares状态变化后都需要调用board()，那把逻辑放在componentDidUpdate里更符合React的生命周期设计。记得加条件判断，避免不必要的调用或无限循环：

componentDidUpdate(prevProps, prevState) {
  // 只有当squares状态确实变化时，才调用board()
  if (prevState.squares !== this.state.squares) {
    this.board();
  }
}

这样每次squares更新、Square完成渲染后，board()都会自动执行，不需要在handleClick里额外调用。

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