ReactJS中无缝动画的正确方法

Question

我希望使用ReactJS实现以下DOM突变，并为其设置动画，以便最终用户无法注意到它。

<RootComponent>
  <MyComponent id="a"/>
  <div>
    <MyComponent id="b"/>
  </div>
  <MyComponent id="c"/>
</RootComponent>

到

<RootComponent>
  <MyComponent id="a2"/>
  <div>
    <MyComponent id="a"/>
  </div>
  <MyComponent id="c"/>
</RootComponent>

我成功处理动画（通过父节点移动DOM节点）并将b替换为a，同时创建新的a2组件。

问题是，只要我让React重新呈现根组件（通过放置a2），我就会遇到不变的违规行为。实际上，我手动改变了DOM，并且数据可能会被改组。

如何按照React的最佳做法完成此类工作流程？