He estado tratando de entender la reconciliación de reacción y estoy realmente confundido por algunos de los detalles de cómo funciona el algoritmo de diferenciación. Hasta ahora, entiendo que cada vez que se realiza una actualización, creamos un nuevo árbol de elementos de reacción y lo comparamos con nuestro árbol de elementos de reacción anterior. El algoritmo de diferenciación logra encontrar la diferencia entre los árboles de elementos de reacción nuevos y antiguos. Los 2 supuestos del algo. son que los elementos del mismo nivel y tipo no necesitan ser desmontados y vueltos a montar y que las claves proporcionan una forma de identificar elementos secundarios no por índice.
La parte que me confunde es cómo se hacen las comparaciones entre 2 instancias de reacción. Por ejemplo, al comparar <Comp1/> en el antiguo árbol de elementos de reacción y <Comp2/> en el nuevo árbol de elementos de reacción (supongamos que <Comp2> reemplazó a <Comp1> en la creación del nuevo árbol), ¿el algoritmo de diferenciación simplemente comparar los atributos de "tipo" de ambos elementos de reacción? Entonces, si ambos tienen el mismo "tipo", ¿entonces el algoritmo de diferenciación no considera desmontar y montar en el DOM?
¿El algoritmo de diferenciación simplemente compara los atributos de "tipo" de ambos elementos de reacción?
Sí, de los documentos :
Siempre que los elementos raíz tengan diferentes tipos, React derribará el árbol antiguo y construirá el nuevo árbol desde cero. Pasar de
<a>a<img>, o de<Article>a<Comment>, o de<Button>a<div>- cualquiera de ellos conducirá a una reconstrucción completa.
Otra tu pregunta:
Entonces, si ambos tienen el mismo "tipo", ¿entonces el algoritmo de diferenciación no considera desmontar y montar en el DOM?
Sí, en ese caso, React solo actualiza la instancia existente. Durante la actualización del componente, la instancia permanece igual y el estado se mantiene en todos los renderizados.
Se puede ver en el siguiente ejemplo:
A , no se desmonta cuando lo reemplazamos también con otro A (porque es del mismo tipo).A , tan pronto como lo reemplazamos con B , reacciona desmonta A . let A = (props) => { React.useEffect(() => { console.log('Mounted A', props); return () => { console.log('Unmounted A', props); }; }, []); return <div>This is A: {props.tmp}</div>; }; let B = (props) => { React.useEffect(() => { console.log('Mounted B', props); return () => { console.log('Unmounted B', props); }; }, []); return <div>This is B</div>; }; function App() { let [tmp, setTemp] = React.useState(0); return ( <div onClick={() => { setTemp(tmp + 1); }} > {tmp % 2 == 0 ? <A id="first A"/> : <A id="second A"/>} {tmp % 2 == 0 ? <A id="third A"/> : <B />} <p>Start editing to see some magic happen :)</p> </div> ); } ReactDOM.render(<App />,document.getElementById("react")); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>