Javascript 按顺序同步渲染React组件

我正在创建一个React应用程序，并使用Mobx进行状态管理。代码如下所示：

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

    render() {
        return (
            <div>
                <div>
                    <ComponentA />
                </div>

                <ComponentB mousePosition={this.props.mouseCoordiantes}/>

                {this.props.renderC && <ComponentC/>}
            </div>
        )
    }
}

@observer
类ComponentX扩展了React.Component{
建造师（道具）{
超级（道具）；
this.renderC=this.props.renderC；
}
render（）{
返回(
{this.props.renderC&&}
)
}
}

执行一些DOM操作，这些操作要求

在执行其内容之前完全呈现

ComponentX

会连续重新渲染，当用户移动鼠标时，会导致子组件也重新渲染，因为

使用这些鼠标坐标作为道具。（

mouseCoordiantes

和

renderC

是Mobx

可观察对象，因此每当其值更改时，使用它们的组件都会自动重新渲染）。根据鼠标位置，
renderC
设置为
true
，这将导致
渲染

但是，当
renderC
设置为
true
时，
在
完成对DOM的渲染之前进行渲染。因此，预期的结果没有实现。为什么会发生这种情况？我如何确保
仅在
完全渲染后才渲染？
使用

类组件B{
componentDidMount（）{
this.setState（{renderC:true}）；
}
render（）{
返回
...
{this.state.renderC&&}
}
}
类组件X{
render（）{
}
}
使
C
成为
B
的子级，使用生命周期方法了解组件何时完全呈现，然后向组件C发送一个道具以应用其逻辑。“是否执行一些需要…”的DOM操作听起来不是个好主意。考虑一下将你的应用程序分解成组件的方式。“我尝试过，但没用。”我在存储中创建了一个附加变量，并通过
ComponentB
中的
componentDidMount
和
componentdiddupdate
方法将该变量更新为
true
，以此作为呈现
ComponentC
的附加条件。但是这没有任何区别。@lux：这有什么帮助？这不会起作用，因为它将进入一个无限的呈现循环
ComponentX
，因为只要
ComponentB
呈现，它就会导致
ComponentX
上的
setState
，这将再次重新呈现组件B，整个过程将重复。认为你是对的。我用另一种选择更新了我的答案
class ComponentB {
  componentDidMount() {
    this.setState({renderC: true});
  }

  render() {
     return <div>
        ...
        {this.state.renderC && <ComponentC />}
     </div>
  }
}

class ComponentX {

  render() {
    <ComponentB />
  }
}