virtual DOM and real DOM out of sync
<p>Recently,we want to implement some animation in React ,here is what we want:When something happens (receive a message from webSocket) ,re-order a list of react component.In my case,only one position of the item in the list will be changed .So firstly,fade out the item from the original position and then fade it in to the right place.
My solution is to remove and add the corresponding item DOM using JQuery because it is easy to implement animation (fade in and fade out),meanwhile I also update the underlying data structure (on which React rely to render ) correctly expecting to make the React render DOM correctly based on the state when emitChange next time.However even if the underlying data structure is correct,React do not work as expect ,the order is still messed up
An interesting part is when I inspected the react plugin in Chrome,the order of react components is <strong>correct</strong>,however ,when I inspect the real DOM,the order is incorrect.Apparently,the two DOM are <strong>out of sync</strong></p>

<p>Is there a way to solve it ?</p>

<p>In addition,I read the animation part of React add-on ,however,I suppose it is limited,when I reorder the list ,the animation do not apply .I will appreciate if there is a react way to achieve this </p>