Originalmente, antes de pintar en el navegador, sé que no puedo obtener datos de estilo calculados (por ejemplo, altura, izquierda, valor de ancho). pero la devolución de llamada de React useLayoutEffect puede acceder y obtener datos de estilo calculados. (Todavía es invisible (no dibuja) en la pantalla)
¿Cómo puedo codificar vanila javascript como useLayoutEffect?
function App() { const testRef = React.useRef<null | HTMLDivElement>(null); React.useLayoutEffect(() => { console.log(testRef.current?.offsetWidth); }, []); return ( <AppWrapper> <div className="test-wrapper" ref={testRef}></div> </AppWrapper> ); } const AppWrapper = styled.div` max-width: 768px; margin: 0 auto; .test-wrapper { width: 100px; height: 100px; background-color: blue; } `;Reaccione useLayout antes de renderizar (que se muestra en la pantalla), obtenga un tamaño calculado de dom.
<style> #test-box { position: absolute; left: 100px; top: 100px; width: 100px; height: 100px; background-color: blue; } </style> <body> <!-- <div id="test-box"></div> --> <script> const textBox = document.createElement('div'); textBox.id = 'test-box'; // print 0 console.log(textbox.offsetWidth); document.body.appendChild(textBox); // print 100 console.log(textBox.offsetWidth); </script>El código de vainilla no puede obtener un tamaño calculado antes de pintar.
*** Auto comentario ***
Primero renderizar retorno + devolución de llamada de layoutEffect es lógica de sincronización y luego la devolución de llamada de useEffect se ejecuta de forma asíncrona.
Más tarde, encontraré una sincronización central de reacción, lógica de ejecución asíncrona.