有沒有其他簡單的方法可以使用 React Hooks 獲取容器的高度和寬度？

Question

我正在使用 React 鈎子useEffect來獲取container的寬度和高度。 我要解決的問題是：

1. 我想獲得響應式容器的高度/寬度，而不是窗口的高度/寬度。
2. 我的初始狀態設置為window.innerHeight並且這本身會使我在初始渲染上的輸出崩潰，因為我首先使用dimension狀態來完成某些事情。
3. 我想使用更簡單的最新方法..可能是 useRef() 或任何東西..

我是這個 React Hooks 的新手，對很多事情一無所知。我想要完美地完成工作的簡單代碼。

我的代碼如下：

function debounce(fn, ms) {
    let timer;
    return (_) => {
        clearTimeout(timer);
        timer = setTimeout((_) => {
            timer = null;
            fn.apply(this, arguments);
        }, ms);
    };
}

export default function App() {
    const [dimensions, setDimensions] = useState({
        height: window.innerHeight,
        width: window.innerWidth,
    });

    useEffect(() => {
        const debouncedHandleResize = debounce(function handleResize() {
            setDimensions({
                height: window.innerHeight,
                width: window.innerWidth,
            });
        }, 1000);

        document
            .getElementById('SldBox')
            .addEventListener('resize', debouncedHandleResize);

        return (_) => {
            document
                .getElementById('SldBox')
                .removeEventListener('resize', debouncedHandleResize);
        };
    });

    return (
        <div className='container' id='SldBox'>
            My Container
        </div>
    );
}

Answer 1

很酷的問題，這里有很多鈎子要學習。

這是我們如何使用的示例：

• 使用狀態
• 使用效果
• 使用備忘錄
• 使用參考

https://codesandbox.io/s/keen-poincare-c8mcz?file=/src/App.js

useState ：你很好地利用了這個。 無需多做解釋。

useRef ：創建一個 ref 然后將其傳遞給您的元素。

export default function App() {
  const ref = useRef(null);

  return (
    <div ref={ref}>stuff</div>
  );
}

現在在第一次渲染之后，我們可以很容易地引用元素。

useMemo ：要為元素設置觀察者，我們可以使用ResizeObserver 。 如果我們不將其包裝在useMemo中，我們將在每次渲染時重新創建此函數，這是一種浪費。 useMemo解決了這個問題。 我們還為ref.current useMemo第二個參數。 這樣，任何時候 ref 更改（例如在第一次渲染時），都會重新計算elementObserver函數。

  const elementObserver = useMemo(() => {
    return new ResizeObserver(() => {
      debounce(() => {
        if (!ref.current) return;
        setDimensions({
          height: ref.current.clientHeight,
          width: ref.current.clientWidth
        });
      }, 1000)();
    });
  }, [ref.current]);

useEffect ：現在我們可以在組件掛載時使用useEffect設置觀察者。 我們再次包含一個依賴數組，它告訴效果在任何這些值發生更改時觸發提供的回調函數。 它也會在組件掛載時始終運行，因此我們需要檢查 ref 是否存在。 此外，將元素分配給“清理”功能效果中的變量。

  useEffect(() => {
    if (!ref) return;
    const element = ref.current;

    elementObserver.observe(element);
    return () => {
      elementObserver.unobserve(element);
    };
  }, [ref.current, elementObserver]);