javascript - 使用钩子(Hook)在调整大小时测量 React DOM 节点

Question

我正在尝试测量窗口调整大小事件中的 React DOM 节点。我在 React hooks-faq 上使用了示例，但它只发生在第一次渲染时。如果我添加一个 useEffect 来监听调整大小，回调不会被调用？

function MeasureExample() {
    const [height, setHeight] = useState(0);

    const measuredRef = useCallback(node => {
        if (node !== null) {
            setHeight(node.getBoundingClientRect().height);
        }
    }, []);


    // Adding this effect doesn't re-calculate the height???
    useEffect(() => {

        window.addEventListener("resize", measuredRef);

        return (): void => {
            window.removeEventListener("resize", measuredRef);
        };

    }, [height])

    return (
        <>
            <h1 ref={measuredRef}>Hello, world</h1>
            <h2>The above header is {Math.round(height)}px tall</h2>
        </>
    );
}

Answer 1

这是另一种解决方案。

function MeasureExample() {
    const [height, setHeight] = useState(0);
    const [node, setNode] = useState(null);

    const measuredRef = useCallback(node => {
        if (node !== null) {
            setNode(node);
        }
    }, []);
    useLayoutEffect(() => {
        if(node){
         const measure = () => {
           setSize(node.getBoundingClientRect().height);
         }
        
         window.addEventListener("resize", measure );

         return () => {
           window.removeEventListener("resize", measure );
         };
       }
    }, [node])

    return (
        <>
            <h1 ref={measuredRef}>Hello, world</h1>
            <h2>The above header is {Math.round(height)}px tall</h2>
        </>
    );
}