В React uselayouteffect Recommentation Пример, зачем хранить свойства getBoundingClientRect () в состоянии и не доступа ⇐ Javascript

[Anonymous]

Я наткнулся на этот пример в документации «Реакция uselayouteffect»: < /p>
import { useRef, useLayoutEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import TooltipContainer from './TooltipContainer.js';

export default function Tooltip({ children, targetRect }) {
const ref = useRef(null);
const [tooltipHeight, setTooltipHeight] = useState(0);

useLayoutEffect(() => {
const { height } = ref.current.getBoundingClientRect();
setTooltipHeight(height);
console.log('Measured tooltip height: ' + height);
}, []);

let tooltipX = 0;
let tooltipY = 0;
if (targetRect !== null) {
tooltipX = targetRect.left;
tooltipY = targetRect.top - tooltipHeight;
if (tooltipY < 0) {
// It doesn't fit above, so place below.
tooltipY = targetRect.bottom;
}
}

return createPortal(

{children}
,
document.body
);
}
< /code>
Зачем хранить высоту в состоянии (Tooltipheight), когда вы можете просто получить доступ к ref.current.getBoundingClientRect (). Высота непосредственно с регулярным использованием? Это устранило бы необходимость в UselayOuteffect. Использование состояния и uselayoutefcect здесь по практическим причинам, или это, например, цели?

Подробнее здесь: https://stackoverflow.com/questions/795 ... clientrect