javascript / intermediate
Snippet
Messung von DOM-Knoten mit useLayoutEffect
useLayoutEffect wird synchron nach allen DOM-Mutationen, aber bevor der Browser die Möglichkeit zum Zeichnen hat, ausgelöst. Es wird verwendet, um das Layout aus dem DOM zu lesen und synchron neu zu rendern, um visuelles Flackern zu vermeiden.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
import { useState, useLayoutEffect, useRef } from 'react';function Tooltip() {const [width, setWidth] = useState(0);const elRef = useRef();useLayoutEffect(() => {setWidth(elRef.current.getBoundingClientRect().width);}, []);return <div ref={elRef}>Width: {width}px</div>;}
react
Erklärung
1
useLayoutEffect(() => { ... }, []);
Läuft ab, bevor der Bildschirm gezeichnet wird, was synchrone Layout-Anpassungen ermöglicht.
2
elRef.current.getBoundingClientRect().width
Liest die präzisen physischen Dimensionen des Elements aus dem Browser.