React组件同步顺序渲染问题：ComponentC需在ComponentB渲染完成后渲染

问题原因分析 #

当mouseCoordinates变化触发ComponentX重渲染，同时renderC被设为true时，React会把ComponentB的重渲染和ComponentC的挂载放在同一个更新批次中处理。React的渲染流程是：先计算所有组件的虚拟DOM，然后一次性更新真实DOM，最后执行组件的生命周期钩子（如componentDidUpdate/componentDidMount）。

如果你的ComponentC的DOM操作依赖ComponentB的最终DOM状态（比如ComponentB内部有异步DOM修改，或者你需要确保ComponentB的DOM已经被浏览器绘制完成），就会出现ComponentC的DOM操作先于ComponentB完成渲染的情况——因为两者的DOM更新是同步完成的，但如果ComponentB有后续的异步操作（比如useEffect中的DOM调整、图片加载完成后的尺寸变化），ComponentC的钩子会先执行，导致获取的DOM状态不完整。

另外，即使ComponentB没有异步操作，如果你期望的“完全渲染完成”是指浏览器已经将ComponentB的DOM绘制到屏幕上，那么React的同步DOM更新后，浏览器还需要时间完成绘制，这时候ComponentC的DOM操作可能会在绘制前执行，导致依赖的视觉状态未就绪。

解决方案 #

下面提供几种不同场景下的可行方案：

方案1：延迟ComponentC的渲染到下一个事件循环

最简单的方式是将ComponentC的渲染延迟到当前React更新批次完成之后，利用requestAnimationFrame（比setTimeout更贴合浏览器渲染周期）将渲染逻辑放到下一个事件循环：

@observer class ComponentX extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showComponentC: false
    };
  }

  componentDidUpdate(prevProps) {
    // 当renderC从false变为true时触发延迟渲染
    if (this.props.renderC && !prevProps.renderC) {
      // 确保浏览器完成绘制后再渲染ComponentC
      requestAnimationFrame(() => {
        this.setState({ showComponentC: true });
      });
    } 
    // 当renderC变为false时立即隐藏
    else if (!this.props.renderC && this.state.showComponentC) {
      this.setState({ showComponentC: false });
    }
  }

  render() {
    return (
      <div>
        <div>
          <ComponentA />
        </div>
        <ComponentB mousePosition={this.props.mouseCoordiantes}/>
        {this.state.showComponentC && <ComponentC/>}
      </div>
    )
  }
}

requestAnimationFrame会在浏览器下一次重绘前执行，能保证ComponentB的DOM已经被绘制完成，很适合依赖视觉状态的DOM操作。

方案2：让ComponentB暴露渲染完成信号

如果ComponentB内部有异步操作（比如图片加载、异步组件渲染），可以让ComponentB暴露一个可观察的状态，表示它已经完全渲染完成：

首先修改ComponentB：

@observer class ComponentB extends React.Component {
  @observable isFullyRendered = false;
  imageRef = React.createRef();

  componentDidMount() {
    this.markAsRendered();
  }

  componentDidUpdate() {
    this.markAsRendered();
  }

  markAsRendered() {
    // 如果有异步依赖（比如图片），等待异步完成后再标记状态
    const imageElement = this.imageRef.current;
    if (imageElement && !imageElement.complete) {
      imageElement.onload = () => {
        this.isFullyRendered = true;
      };
    } else {
      // 无异步依赖时直接标记为完成
      this.isFullyRendered = true;
    }
  }

  render() {
    return <div ref={this.imageRef}>...</div>;
  }
}

然后在ComponentX中，让ComponentC的渲染依赖ComponentB的isFullyRendered状态：

@observer class ComponentX extends React.Component {
  constructor(props) {
    super(props);
    this.componentBRef = React.createRef();
  }

  render() {
    const shouldShowC = this.props.renderC && this.componentBRef.current?.isFullyRendered;
    
    return (
      <div>
        <div>
          <ComponentA />
        </div>
        <ComponentB ref={this.componentBRef} mousePosition={this.props.mouseCoordiantes}/>
        {shouldShowC && <ComponentC/>}
      </div>
    )
  }
}

这种方案能精确控制ComponentC的渲染时机，确保ComponentB的所有异步操作都完成后再渲染。

方案3：在ComponentC内部等待ComponentB就绪

如果ComponentC的DOM操作不需要延迟渲染本身，只是需要等待ComponentB的DOM状态，可以在ComponentC内部监听ComponentB的状态，在就绪后再执行DOM操作：

@observer class ComponentC extends React.Component {
  componentDidMount() {
    // 假设通过props传入ComponentB的实例
    this.reactionDisposer = reaction(
      () => this.props.componentB.isFullyRendered,
      (isReady) => {
        if (isReady) {
          this.performDOMOperations();
        }
      }
    );
  }

  componentWillUnmount() {
    // 清理Mobx反应式监听
    this.reactionDisposer();
  }

  performDOMOperations() {
    // 这里执行你的DOM操作逻辑
    const componentBDom = document.querySelector('.component-b-selector');
    if (componentBDom) {
      // 基于ComponentB的DOM进行操作
    }
  }

  render() {
    return <div className="component-c">...</div>;
  }
}

这种方式不需要修改ComponentX的渲染逻辑，而是让ComponentC自己处理依赖时机，更符合组件职责分离的原则。

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