useResize

自定义hook，可以监视window或者给定元素的宽高变化。 在用d3+react的时候写的一个hook，解决svg在窗口大小变化时同步刷新内容。

function useResize(ref = null) {
  //ref不能是svg
  const [size, setSize] = useState({
    width: undefined,
    height: undefined,
  });
  useEffect(() => {
    //监视元素大小
    //在有ref，并支持ResizeObserver的情况下
    if (ref && ref.current && ResizeObserver) {
      const resizeObserver = new ResizeObserver(entries => {
        entries.forEach(({ contentRect: { width, height } }) => setSize({ width, height }))
      })
      resizeObserver.observe(ref.current)
      return () => resizeObserver.disconnect();
    }
    //监视窗口大小
    //在不提供ref的情况
    function handleResize() {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }
    window.addEventListener("resize", handleResize);
    handleResize();
    return () => window.removeEventListener("resize", handleResize);
  }, ref ? [ref] : []);
  return size;
}

需要注意ref不能是svg本身，需要把svg放到一个container。再把svg的宽或者高设置为100%

const containerRef = useRef()
const dimension = useResize(containerRef)
useEffect(() => {
  //更新svg内容
}, [dimension])
return (<div ref={containerRef}>
  <svg width="100%"></svg>
</div>)