Según el título, si tuviera que hacer algo como el fragmento de código a continuación, ya que se llamará a React.useRef en cada renderizado, ¿hay alguna necesidad de hacer una limpieza en la llamada a document.createElement("div") , o será el ¿La basura del navegador recolecta ese div que se crea cuando llega el próximo renderizado?
Soy consciente de que si tuviera que agregar el div con document.body.appendChild , entonces necesitaría limpiar el elemento que realmente se agrega... Me pregunto sobre el div que se almacena en la memoria después de React.useRef Se llama React.useRef .
function Modal() { const portalRef = React.useRef(document.createElement("div")); return null; }El DIV no necesita ser limpiado manualmente, pero tampoco la creación del DIV se relaciona con el hecho de que se llama a useRef en cada renderizado, es decir, el DIV mismo se crea en cada renderizado, independientemente de useRef.
Considere esta forma de refactorizar su código:
function Modal() { const newDiv = document.createElement("div"); // <-- new DIV created const portalRef = React.useRef( newDiv ); // <-- useRef called return null; }Aquí se vuelve obvio cómo se crea un simple objeto DOM antiguo (el nuevo DIV) en cada renderizado. Se aplica el comportamiento normal de Javascript/DOM con respecto al DIV.
useRef solo usa el primer DIV creado como valor inicial y simplemente ignora todos los siguientes.
De hecho, esta es una creación desperdiciada de un DIV en cada renderizado. La mejor solución a esto depende del propósito del código. P.ej:
document.createElement("div") de todos modos, Además, el valor contenido dentro de useRef también es solo un objeto Javascript simple (básicamente) y se comportará como tal.
Es decir portalRef es solo un objeto { current: myInitialDiv } , que vive tanto como el componente, y luego se elimina. Tenga en cuenta que myInitialDiv sigue siendo el primer DIV que se creó, no uno de los posteriores.