Sé que podemos detectar la representación de componentes a través de la herramienta de desarrollo de React, también he leído otras formas en esta pregunta . pero esto no es lo que necesito.
Estoy buscando una forma de detectar la representación de elementos individuales en Componente, por ejemplo, cuando tenemos una lista asignada y agregaremos un elemento:
antes de:
<ul> <li key="1">Banana</li> <li key="2">Watermelon</li> <li key="3">Pear</li> </ul>después:
<ul> <li key="0">Apple</li> <li key="1">Banana</li> <li key="2">Watermelon</li> <li key="3">Pear</li> </ul> Sé que aquí React crea un nuevo DOM virtual y lo compara con el anterior, luego actualiza el DOM del navegador con la menor cantidad de cambios posibles sin volver a renderizar todo el DOM. en este caso, usar key React no mutará a todos los niños y darse cuenta de que puede mantener intactos los subárboles <li>Banana</li> , <li>Watermelon</li> y <li>Pear</li> .
Necesito ver este proceso de renderizado/inserción correctamente. Como observo, la herramienta de desarrollo de Chromes (Shift+Ctrl+i => Elementos) no funciona correctamente, porque funciona de la misma manera con Vanilla JavaScript cuando Vanilla JavaScript mutaría a todos los niños en lugar de darse cuenta puede mantener intactos los subárboles <li>Banana</li> , <li>Watermelon</li> y <li>Pear</li> , pero en la herramienta para desarrolladores de Chrome esto no se detecta.
¿Hay alguna forma de detectar elementos que se rendericen correctamente? (incluso por navegador si no hay ninguna herramienta React)
PD
No me refiero a la representación de componentes
DOMSubtreeModifiedAlgo como esto:
document .querySelector("#value") .addEventListener("DOMSubtreeModified", function () { alert("value changed"); });Fragmento de código de trabajo:
function App() { const [state, setState] = React.useState(["Banana", "Watermelon", "Pear"]); React.useEffect(() => { document .querySelector("#list") .addEventListener("DOMSubtreeModified", function () { alert("element changed"); }); }, []); const handleAddState = () => { setState([...state, "Pear"]); }; return ( <div className="App"> <button type="button" onClick={handleAddState}> Increase </button> <ul id="list"> {state.map((item) => ( <li>{item}</li> ))} </ul> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="root"></div>