在重新渲染之前,我需要计算并更新svg大小。由于svg可以包含许多子级,因此我尝试通过避免两次重新渲染来做到这一点。
const Canvas: React.FunctionComponent<CanvasProps> = React.memo((props) => {
const [width, setWidth] = useState(1000);
const [height, setHeight] = useState(1000);
const svgElement = useRef<SVGSVGElement>(null);
useEffect(() => {
if (svgElement.current) {
const rect = svgElement.current.getBBox();
setWidth(//some calculations using rect.width);
setHeight(//some calculations using rect.height);
}
}, [props]);
return (
<svg {...props} width={width} height={height} ref={svgElement}/>
);
}
不幸的是,以上代码会导致重新渲染。第一次更改属性。状态第二次改变。还有其他解决方案吗?