pomber / didact

A DIY guide to build your own React
https://pomb.us/build-your-own-react/
6.29k stars 531 forks source link

fix: dom order #18

Closed Grafikart closed 2 years ago

Grafikart commented 4 years ago

When an element is updated, it is not moved, so if a previous element is added to the dom (PLACEMENT) the HTML structure doesn't reflect the virtual DOM.

<div/> PLACEMENT // appendChild() move this element after the updated element
<a/> UPDATE 
<b/>PLACEMENT 
<c/>PLACEMENT

This tree will produce the following structure (with the div positionned after the <a/>)

<a/>  
<div/> 
<b/> 
<c/>
josephspurrier commented 4 years ago

I think the issue with this is it will always do a redraw of all elements then. I feel like the more efficient approach would be when doing a placement, determine if that needs to be an appendChild() or an insertBefore(). I just can't figure out how you would determine that without tracking indexes.